Angular ui select multi-select:从控制器中选择某些项目时，下拉菜单不会更新

Question

单击"选择黄色"按钮，我想将黄色添加到所选列表中。黄色被选中，但下拉列表仍显示黄色。同样，我想在点击"取消选择黄色"按钮时取消选择黄色。我可以取消选择黄色，但黄色不会出现在下拉列表中。请帮我解决这个问题。HTML:

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.colors}}</p>
<input type="button" value="select yellow color" ng-click="selectYellowColor()"/>
<input type="button" value="deselect yellow color" ng-click="deselectYellowColor()"/>

JS:

$scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
$scope.multipleDemo = {};
$scope.multipleDemo.colors = ['Blue','Red'];
$scope.selectYellowColor = function(){
if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) == -1){
$scope.multipleDemo.colors.push($scope.availableColors[3]);
}
};
$scope.deselectYellowColor = function(){
if($scope.multipleDemo.colors.indexOf($scope.availableColors[3]) != -1){
var index = $scope.multipleDemo.colors.indexOf($scope.availableColors[3]);
$scope.multipleDemo.colors.splice(index, 1);
}
};

这是plunker链接http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

Answer 1

UPD：这是ui-select组件中的一个问题。你可以使用我的解决方案作为部分解决方案，直到这个问题还没有解决

ui-select不进行项目筛选。它只是在ui-select-choices的repeat属性中评估您的表达式。如果你想从建议中排除已经使用过的值，你可以自己做。

在repeat中添加额外的过滤器

<ui-select-choices repeat="color in availableColors | filter:omitSelectedColors | filter:$select.search">

然后定义你的过滤功能：

$scope.omitSelectedColors = function(color) {
return $scope.multipleDemo.colors.indexOf(color) === -1;
}