angularjs – Angular ui-select multi select：从控制器中选择

发布时间：2020-12-17 07:12:46 所属栏目：安全来源：网络整理

导读：点击“选择黄色”按钮,我想在所选列表中添加黄色.黄色正在被选中,但下拉列表仍显示黄色.以同样的方式,我想点击“取消选择黄色”按钮取消选择黄色.我能够取消选择黄色,但下拉列表中没有出现黄色.请帮我解决这个问题. HTML： ui-select multiple ng-model="mul

点击“选择黄色”按钮,我想在所选列表中添加黄色.黄色正在被选中,但下拉列表仍显示黄色.以同样的方式,我想点击“取消选择黄色”按钮取消选择黄色.我能够取消选择黄色,但下拉列表中没有出现黄色.请帮我解决这个问题.
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

解决方法

UPD：这是ui-select组件中的 issue.您可以将我的解决方案用作部分解决方法,直到此问题尚未解决

ui-select不会过滤项目.它只是在ui-select-choices的重复属性中评估你的表达式.如果您想从建议中排除已使用的值,您可以自己完成.

添加额外的过滤器重复

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

然后定义您的过滤功能：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!