user3806486
user3806486

Reputation: 135

Angular ui-select within ng-repeat

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>

Upvotes: 2

Views: 2322

Answers (1)

user3806486
user3806486

Reputation: 135

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.

Upvotes: 5

Related Questions