3

I am using this plugin http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

If you check the demo part in this page, please use the ' Smart Button Text ' Demo as i am using that.

In this demo, if you select any users, those names will be displayed in the bar.

Now, i want to give default value to it. So as soon as the page loads, there will be a default value present in this multiselect dropdown.

In normal case, i can use ng-init. What should i do in this case ?

Can someone shed some light here please.....

Improve this question
4
  • @DeblatonJean-Philippe- Excuse me Jean. i didnt get wat u meant Commented Jan 13, 2016 at 23:43
  • 1
    docs.angularjs.org/guide/controller Commented Jan 13, 2016 at 23:45
  • @DeblatonJean-Philippe- I can assign initial state by using $scope.value="34". but this type of assignment doesnt work for this plugin... Commented Jan 13, 2016 at 23:59
  • 1
    Provide a demo for people to test with Commented Jan 14, 2016 at 0:39

4 Answers 4

Reset to default
4

Here's a fiddle that does what you want to achieve: https://jsfiddle.net/etfLssg4/

A long summary of that fiddle is as follows:

    var items = [{
        id: 1,
        label: "David"
    }, {
        id: 2,
        label: "Jhon"
    }, {
        id: 3,
        label: "Lisa"
    }, {
        id: 4,
        label: "Nicole"
    }, {
        id: 5,
        label: "Danny"
    }];

    $scope.example13data = items;

    // here we set the default selections as 'Lisa' and 'Danny'.
    // The point you had missed is that both selection array and options array
    // should have elements with matching references.
    $scope.example13model = [items[2], items[4]];

    $scope.example13settings = {
        smartButtonMaxItems: 3,
        smartButtonTextConverter: function(itemText, originalItem) {
            if (itemText === 'Jhon') {
                return 'Jhonny!';
            }

            return itemText;
        }
    };

If the default selection were to be set in the following manner (as you probably did):

$scope.example13model = [{
    id: 3,
    label: "Lisa"
}, {
    id: 5,
    label: "Danny"
}];

It wouldn't work because, for instance, the following comparison evaluates to false:

items[2] === { id: 3, label: "Lisa" }; // false!

In answer to your question -

wat if i need to update the dropdown with values i get from a ajax call. for e.g. after ajax call, i get a response in an object stating id 3 is to be selected. how do i bind the response to the dropdown and let the user see the updated value

?

The solution to the issue in question can be resolved as follows:

var items = [/* as before, this is the list of base options */];
...
...
var dataFromAjax = [/* data here */];
var selection = items.filter(function(item){
    // check if the item matches any one in the ajax data
    return dataFromAjax.some(function(dataItem){
        // assuming the `id` property is unique
        return item.id === dataItem.id;
    });
});
// at this point `selection` is an array with elements that are references to selected option items.
Improve this answer
Sign up to request clarification or add additional context in comments.

10 Comments

well, when I checked the Git hub project I saw that the plugin has a dependency on it.
if you used node or bower as your package manager, it must have resolved that dependency for you automatically (probably why didn't notice earlier)
then you should find the references in the options that are equivalent (or matching) to the date you got from your ajax call
With your understanding of angularjs, you should know where to place each bit of the sample code.
as per your question earlier - in that case you;d have to propagate the structure up to the markup like this: options="obj.example13model", and that'd be it.
|
2

I use the same library. Following works for me: 

<div ng-dropdown-multiselect options="data.options" selected-model="data.preselected"></div>

$scope.data = {
  options: [
    {id: 1, label: 'one'},
    {id: 2, label: 'two'},
    {id: 3, label: 'three'},
    {id: 4, label: 'four'}
  ],
  preselected: [
    {id: 2, label: 'two'},
    {id: 3, label: 'three'}
  ]
};

EDIT:

Here is working Plunker I'm pretty sure you don't have lodash.js available. Just add <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.js"></script> to your html.

Improve this answer

2 Comments

@oKonyk- no, it gives an error stating "Cannot read property 'length' of undefined. and data displayed in dropdown bar is {{getButtonText()}}
Please check my edit, here is working solution: plnkr.co/edit/eIK7p6kqunptUTcDQ0G4?p=preview. And again don't forget to add lodash.js
0

Have you tried initializing the model with the default value in your controller? Something like this:

$scope.example13model = [{"id": 1}]
Improve this answer

1 Comment

it didnt work. gives a blank field in the dropdown tab.
0

I look at document.

I think ,

 $scope.example1data = new Array({id: 1, label: "David"}, {id: 2, label: "Jhon"}, {id: 3, label: "Danny"});



$scope.example1model = new Array();
 //elements that we want to checked
 $scope.example1model.push( $scope.example1data[0])
 $scope.example1model.push( $scope.example1data[1))
Improve this answer

5 Comments

sorry, i didnt get what you meant exactly in the last para.
I want to mean that you should set one of elements in example1data to its model. otherwise dropdown fills blank
tried it but it didnt work. still shows blank. $scope.example1model = $scope.example1data[0]; and it doesnt work
:( didnt work yunus. is it possible for you to try on ur local machine and see if you could set a default value
@Ayesha, I've made a working fiddle. Check my answer to see the explanation.. if you need more clarification, do ask.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.