角度ui-select多选:从控制器选择某些项时下拉列表未更新 [英] Angular ui-select multi select: Dropdown is not getting updated on selecting some items from the controller

问题描述

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

On click of "select yellow color" button, I want to add yellow to the selected list. Yellow is getting selected, but the dropdown is still showing yellow. In the same way, I want to deselect yellow on click of "deselect yellow color" button. I am able to deselect yellow, but yellow is not appearing in the dropdown. Please help me with this issue. 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);
    }
  };

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

推荐答案

UPD :这是

UPD: this is an issue in ui-select component. You can use my solution as a partial workaround until this issue has not been resolved

ui-select不对项目进行过滤.它只是在ui-select-choices的repeat属性中评估您的表达式.如果要从建议中排除已经使用的值，则可以自己完成.

ui-select doesn't do filtering of items. It just evaluating your expression in repeat attribute of ui-select-choices. If you want to exclude already used value from suggest, you can do it by yourself.

在repeat

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

然后定义您的过滤功能:

And then define your filtering function:

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

这篇关于角度ui-select多选:从控制器选择某些项时下拉列表未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！