Mutiple select box USING ui-select shows error

Question

<ui-select id="facility" multiple ng-model="IdRequest.formData.facilityRequestedArray"  validation="required" ng-disabled="IdRequest.formData.applicantReadOnly" class="drop-down">
  <ui-select-match allow-clear="true" placeholder="{{'select'|translate}}">
    {{$item.displayText}}
  </ui-select-match>
  <ui-select-choices repeat="facility.id as facility in IdRequest.facilityList">
    {{facility.displayText}}
  </ui-select-choices>
</ui-select>

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $item in $select.selected, Duplicate key: number:1, Duplicate value: 1

Its Fixed For Angular 1.5.x version need to use ui-select version : 0.16.0 or above — Rejayi CS, Sep 09 '16 at 12:50

Sergey Gurevich · Answer 1 · 2016-09-01T02:43:18.223

I'm having the same issue with ui-select (version 2.1.3). The selected items are loaded via ajax, the correct selection will show up but when clicked to select another option, the already selected options are within the possible options and when selected again a dupe error is firing.

I decided not to dig in the sources, instead to force refresh the directive from the script.

This is the fix: HTML

<ui-select multiple="true" ng-model="x.itemsSelected" theme="bootstrap">
    <ui-select-match placeholder="Select Eligibility Item...">{{$item.name + ' #' + $item.id}}</ui-select-match>
    <ui-select-choices repeat="item.id as item in x.itemsAvailable | filter: $select.search track by $index" refresh="uiSelectRefreshFix($select)" refresh-delay="1000">
        <div ng-bind-html="item.name + ' #' + item.id | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

Controller

// ui-select bugfix.
$scope.uiSelectRefreshFix = function () {

    if ($scope.uiSelectFix) return; 
    $scope.uiSelectFix = true;

    var fix = $scope.x.itemsSelected;
    $scope.x.itemsSelected = [];

    setTimeout(function() {
        $scope.$apply(function(){
            $scope.x.itemsSelected = fix;
        });
    }, 100)
    console.log([model, query]);
}

nweg · Answer 2 · 2015-04-20T18:23:53.723

Set your multiple equal to true like so:

<ui-select id="facility" multiple='true' ng-model="IdRequest.formData.facilityRequestedArray"  validation="required" ng-disabled="IdRequest.formData.applicantReadOnly" class="drop-down">

See this github link: https://github.com/angular-ui/ui-select/issues/366

If you have duplicate facilities also add track by $index to your repeater like this:

<ui-select-choices repeat="facility.id as facility in IdRequest.facilityList track by $index">

Mutiple select box USING ui-select shows error

2 Answers2