Angular ui-select within ng-repeat

Question

I'm using ui-select within an ng-repeat to create a select box for each item over a collection. However, when I select a node ID in any of the individual select boxes it ends up getting selected in all of them. How can I configure the {{$select.selected.id}} part such that only the current choice select box gets updated? Here is the relevant code:

<div style="float:left; width:160px;" ng-repeat="choice in choices">
<div class="input-group">
    <ui-select ng-model="node.selected" theme="bootstrap" ng-disabled="disabled" reset-csearch-input="true" style="width:50px; float:left">
        <ui-select-match placeholder="{{choice.to_node_id}}">{{$select.selected.id}}</ui-select-match>
        <ui-select-choices repeat="node in nodes | filter: $select.search">
            <div ng-bind-html="node.id | highlight: $select.search" ng-click="updateChoiceLink(choice, node)"></div>
        </ui-select-choices>
    </ui-select>
</div>

if you define separate ng-model values for each of the selects this can be solved.If you provide a plunker i can demonstrate it — Divya MV
– Divya MV, Commented Mar 3, 2015 at 6:46
I changed ng-model to "choice.selected" and it works now :) Thanks a bunch! — user3806486
– user3806486, Commented Mar 3, 2015 at 6:56
post how you solved it and accept it as answer so incase someone got the same problem — Ceeee
– Ceeee, Commented Mar 3, 2015 at 6:57

user3806486 · Accepted Answer · 2015-03-04 03:05:27Z

5

I was able to solve the problem by binding the model to choice.selectedas opposed to node.selected. This way each select box has a unique ng-model based on the choice.

answered Mar 4, 2015 at 3:05

user3806486

1351 silver badge7 bronze badges

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

3 Comments

TheKingPinMirza Over a year ago

Hey, can you post your controller code? i am struck with same problem.

Deepak Patidar Over a year ago

<ui-select multiple n-d="{{columnsTagObj.displayColumns[colValues.tag]}}" ng-model="columnsTagObj.displayColumns[colValues.tag]" theme="selectize" ng-disabled="disabled" reset-search-input="false" required> <ui-select-match>{{$item}}</ui-select-match> <ui-select-choices refresh="getDrugNameList($select.search)" refresh-delay="0" repeat="item in Druglist | filter:$select.search"> {{item}} </ui-select-choices> </ui-select>

Deepak Patidar Over a year ago

I am using ng-repeat to create two input box of ui-select but the first one is showing blank and second one is showing both first and second value even the ng-model is different for each

Collectives™ on Stack Overflow

Angular ui-select within ng-repeat

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related