Angular ui-select multi select: select 控制器中的某些项目未更新下拉列表

Question

单击 "select yellow color" 按钮后，我想将黄色添加到所选列表中。黄色被选中，但下拉列表仍显示黄色。同样，我想在单击 "deselect yellow color" 按钮时取消选择黄色。我可以取消选择黄色，但黄色没有出现在下拉列表中。请帮我解决这个问题。 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 link http://plnkr.co/edit/AHZj1zAdOXIt6gICBMuN?p=preview

Answer 1

UPD：这是 ui-select 组件中的 issue。在这个问题没有得到解决之前，您可以使用我的解决方案作为部分解决方法

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;
}

Angular ui-select multi select: select 控制器中的某些项目未更新下拉列表

Angular ui-select multi select: Dropdown is not getting updated on selecting some items from the controller

multi-select

angularjs

ui-select

angular-ui-select