获取新值 selected 在 ng-option 中改变多个 select

Question

我的 .html 页面中有一个下拉列表作为多个 select:

 <select class="form-control"
         multiple
         ng-model="filter.types"
         ng-change="onChange()"
         ng-options="option for option in filterOptions.types">
    {{option}}
 </select>

在我的控制器中，我有 onChange 函数：

$scope.onChange= function(newOptionSelected){
    console.log(newOptionSelected);
}

这里我想获取当前项目添加到 selected filter.types。我怎么能做到这一点？

如果它是单个 select 我可以简单地将 ng-model 传递给 onChange 函数。

<select class="form-control"
     ng-model="filter.type"
     ng-change="onChange(filter.type)"
     ng-options="option for option in filterOptions.types">
{{option}}

但是如何用多个 select 来实现呢？

有什么想法吗？ :)

如果添加的选项是 "All"，我想删除所有 selected 的元素。如果 "All" 选项是 selected，那么当我 select 下一个项目时，我只需要删除 "All" 选项。

Answer 1

您可以查看 angular 的文档以获得此问题的答案。 https://docs.angularjs.org/api/ng/directive/select

Plunker:- https://plnkr.co/edit/rhX9AiAhPfHXB2c2BUZF?p=preview

Answer 2

您无法使用 ng-change 实现此目的，因为您需要跟踪上次选择的选项。你必须 $watch 你的 filter.types 这是一个数组，然后根据新值和旧值你可以决定要做什么。

$scope.$watch('filter.types', function(newVal, oldVal) {
      if (newVal.length > oldVal.length) { //Updating only on selecting 
        var lastSelectedOption = [];
        lastSelectedOption = $scope.diff(newVal, oldVal);
        if (lastSelectedOption[0] == 'All') { 

          var i = newVal.length;
          while (i--) {
            if (newVal[i] != 'All') {
              newVal.splice(i, 1); //Deleting other options
            }
          }
        } else if (newVal.indexOf('All') > -1) { 
          newVal.splice(newVal.indexOf('All'), 1); //Deleting 'All' option
        }
      }

    });

工作JSFiddle link供您参考。祝你好运！

获取新值 selected 在 ng-option 中改变多个 select

Get new value selected in ng-option on change in a multiple select

javascript

select

multiple-select

angularjs