在多选更改中获取在ng-option中选择的新值

Question

我在.html页面中有一个下拉列表作为多项选择：

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

在这里，我想将当前项添加到所选的filter.types中。 我怎样才能做到这一点？

如果只是一个选择，我可以将ng模型简单地传递给onChange函数。

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

但是如何通过多选实现呢？

有任何想法吗？ :)

如果添加的选项为“全部”，我想删除所有选定的元素。 如果选择了“全部”选项，那么当我选择下一个项目时，我只需要删除“全部”选项。

Answer 1

您不能使用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链接供您参考。 祝好运！

Answer 2

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

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