Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

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.....

share|improve this question
    
a controller... – Deblaton Jean-Philippe Jan 13 at 23:38
    
@DeblatonJean-Philippe- Excuse me Jean. i didnt get wat u meant – Ayesha Jan 13 at 23:43
1  
    
@DeblatonJean-Philippe- I can assign initial state by using $scope.value="34". but this type of assignment doesnt work for this plugin... – Ayesha Jan 13 at 23:59
1  
Provide a demo for people to test with – charlietfl Jan 14 at 0:39
up vote 1 down vote accepted

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.
share|improve this answer
1  
good to know. I hope it's also clear for you why it's working.. – Igwe Kalu Jan 14 at 1:10
1  
well, when I checked the Git hub project I saw that the plugin has a dependency on it. – Igwe Kalu Jan 14 at 1:14
1  
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) – Igwe Kalu Jan 14 at 1:16
1  
then you should find the references in the options that are equivalent (or matching) to the date you got from your ajax call – Igwe Kalu Jan 14 at 1:17
1  
With your understanding of angularjs, you should know where to place each bit of the sample code. – Igwe Kalu Jan 14 at 1:31

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.

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

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

$scope.example13model = [{"id": 1}]
share|improve this answer
    
it didnt work. gives a blank field in the dropdown tab. – Ayesha Jan 14 at 0:08

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))
share|improve this answer
    
sorry, i didnt get what you meant exactly in the last para. – Ayesha Jan 14 at 0:14
    
I want to mean that you should set one of elements in example1data to its model. otherwise dropdown fills blank – yunus kula Jan 14 at 0:18
    
tried it but it didnt work. still shows blank. $scope.example1model = $scope.example1data[0]; and it doesnt work – Ayesha Jan 14 at 0:23
1  
I edit my post. please can you try – yunus kula Jan 14 at 0:30
1  
@Ayesha, I've made a working fiddle. Check my answer to see the explanation.. if you need more clarification, do ask. – Igwe Kalu Jan 14 at 1:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.