Can't preselect items in multiple select

[cluka]

Hi, if using multiple select How can I pre select items in the dropdown? DropDown is bound to angular model on the controller.

[ColonelBundy]

set your ng-model in the view of the dropdown, then from controller set the model as an array with the same keys as your repeat with your perferred value(s). Its quite simple.

Example

Controller

$scope.default = [ {id: "1", name: "Test"}, {id "2", name: "Test2"} ];

Add more objects to preselect more... you get the point :P

View

<ol class="nya-bs-select" ng-model="default" data-selected-text-format="values" multiple>
     <li nya-bs-option="user in users">
        <a>
            {{user.name}}
            <span class="glyphicon glyphicon-ok check-mark"></span>
        </a>
    </li>
</ol>

Code is untested but should work!

[m00s]

I post this just in case someone is having issues with preselect. Hope to save time.

The preselect works fine, but the button label does not reflect the correct state selection. After selecting one more item, it updates correctly. Seems like the initial value is not taken correctly.

Example

<p> SELECTED ITEMS ({{ selectedItems.length }}) </p>
<ul class="nya-bs-select" ng-model="selectedItems" actions-box="true" live-search="true" data-selected-text-format="count" multiple>
    <li nya-bs-option="item in itemList">
        <a> {{ item.name }}
            <span class="glyphicon glyphicon-ok check-mark"></span>
        </a>
    </li>
</ul>

$scope.selectedItems = [{id:1, name: 'foo'},{id:2, name: 'bar'}]

In this case the label on top shows SELECTED ITEMS (2), the two items inside the dropdown are marked as selected (with the checkmark), but the button label says Nothing selected. if I select one more item, the label is correcly updated showing 3 Items selected.

Solution

Adding the deep-watch attribute on the nya-bs-option solved the problem for me.

---

@lordfriend think you can close this. It works as expected.

[rolfback]

I'm having problems with the multiple-flag that does not set the values from ng-model when multiple is set. If I remove "multiple" the first object is selected as it should with the same data but multiple values is not selected. Tried all possible combinations, including deep-watch.

<ol class="nya-bs-select form-control" ng-model="task.AssignedIds" multiple live-search="true">
    <li nya-bs-option="user in MyResourcesInclTemps" deep-watch="true">
        <a>{{user.Name}} <span class="glyphicon glyphicon-ok check-mark"></span></a>
    </li>
</ol>

[lordfriend]

In multiple mode，ng-model is an array

[rolfback]

In my example above I have MyResourcesInclTemps which contains [{"UserId":123,"Name":"Peter"}, {"UserId":124,"Name":"Maria"}] and the model (task.AssignedIds) is [124]. Also tried ['124'].

I've also tried with an exactly the same array for the model as the options but it also fails. [{"UserId":124,"Name":"Maria"}].

How do you suggest I solve this?

[lordfriend]

@rolfback You need add data-value="user.userId" to nya-bs-option directive.

this attribute tell nya-bs-option directive to resolve user.userId in each context as model value.

doc is here http://nya.io/nya-bootstrap-select/#!/api/nya-bs-option

the example is here http://nya.io/nya-bootstrap-select/#!/examples/groups-and-more

[rolfback]

Thanks @lordfriend! I just hardcoded an variable to hold the array [124] and used that instead of task.AssignedIds (which contains the same value) and then it works as it should. Must be something with the parent ng-repeat then and the digest cycle.

[rolfback]

To save time and frustration for future users that might have the same problem as I did; multiple isn't working within a ng-repeat. Everything looked ok when printing out {{task.AssignedIds}} but after a few hours I found the error. The string from the database was not treated as an array. My solution was to loop the values and update the array for the model:

angular.forEach(items, function (value, key) {
    value.AssignedIds = angular.fromJson(value.AssignedIds);
});

[pandanrain]

data-value="user.userId" to nya-bs-option directive this works for me