多重选择框USING ui select显示错误

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>

错误：[ngRepeat:dups]不允许在中继器中重复。使用"track by"表达式可以指定唯一的关键点。中继器：$select.selected中的$item，重复键：数字：1，重复值：1

Answer 1

我在ui select(2.1.3版)上也遇到了同样的问题。所选项目通过ajax加载，会显示正确的选择，但当单击选择另一个选项时，已经选择的选项在可能的选项范围内，当再次选择时，会出现重复错误。

我决定不挖掘源代码，而是强制刷新脚本中的指令。

这是修复方法：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>

控制器

// 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]);
}

Answer 2

将倍数设置为true，如下所示：

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

请参阅此github链接：https://github.com/angular-ui/ui-select/issues/366

如果你有重复的设施，也可以通过$index将音轨添加到你的中继器中，如下所示：

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