Angularjs ui-select: how to set selected value for multiple dropdowns

Question

I have multiple ui-selects on the page. How can I set selected value for each of the item separately, thus using single list retrieved from service?

HTML:

<div class="col-sm-4">
   <ui-select class="col-sm-12 no-padding" ng-model="mappingStrengthList.selected">
   <ui-select-match placeholder="Choose strength">
   <span ng-bind="$select.selected.name"></span>
   </ui-select-match>
   <ui-select-choices repeat="item in (mappingStrengthList | filter: $select.search) track by item.id">
   <span ng-bind="item.name"></span>
   </ui-select-choices>
   </ui-select>
 </div> 
<div class="col-sm-4">
   <ui-select class="col-sm-12 no-padding" ng-model="mappingStrengthList.selected">
   <ui-select-match placeholder="Choose strength">
   <span ng-bind="$select.selected.name"></span>
   </ui-select-match>
   <ui-select-choices repeat="item in (mappingStrengthList | filter: $select.search) track by item.id">
   <span ng-bind="item.name"></span>
   </ui-select-choices>
   </ui-select>
 </div>

Controller:

ListService.getList('mapping-strength').then(function (results) {
                $scope.mappingStrengthList = results;
            }, function (error) {
                console.log(error);
            });

lithium · Accepted Answer · 2016-05-29 18:36:30Z

1

If you want differents selected value, your model should be different, right now you use : ng-model="mappingStrengthList.selected" on both.

I don't think you should even use mappingStrengthList it's the data that will populate the option, the model should be something else.

answered May 29, 2016 at 18:36

lithium

2291 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George Sharvadze Over a year ago

I have dynamically populated list of dropdowns, can I create models dynamically?

lithium Over a year ago

No, what I mean is, you need to have different model for each one, the value of the model will be the value of the selected option, you should do something like ng-model="myModel" and ng-model="myModel2". and in your controller : $scope.myModel and $scope.myModel2.

Paresh Gami · Accepted Answer · 2016-05-29 18:34:38Z

0

$scope.mappingStrengthList.selected = 'YOUR-VALUE-WHICH-YOU-WANT-SET'

answered May 29, 2016 at 18:34

Paresh Gami

4,7926 gold badges28 silver badges44 bronze badges

1 Comment

Paresh Gami Over a year ago

Yah that is make sense you have to make each model for each selectbox that is only way

Collectives™ on Stack Overflow

Angularjs ui-select: how to set selected value for multiple dropdowns

2 Answers 2

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Related