在多项选择中更改时获取在 ng-option 中选择的新值答案

【问题标题】：Get new value selected in ng-option on change in a multiple select在多项选择中更改时获取在 ng-option 中选择的新值
【发布时间】：2018-09-04 16:08:41
【问题描述】：

我的 .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-model 传递给 onChange 函数。

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

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

有什么想法吗？ :)

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

【问题讨论】：

究竟是什么阻止了您选择模型？ Demo
可以，但我想知道当前将哪个元素添加到所选选项的数组中。因为如果选择的选项是“全部”，我想清空数组并只留下“全部”选项。如果索引大于 0，我可以搜索 indexOf('all) 并删除所有元素。但是，如果我选择了“全部”并且我想选择不同的东西，它将无法工作。如果我知道当前添加的项目是“全部”，我可以全部删除。如果是不同的东西，我可以删除“全部”选项。
嗯，这对你的问题来说是一个很好的补充，我建议你用这个信息编辑它
当我使用辅助数组解决这个问题并检查“all”的索引是否已经在所选选项中时。不过不是很好，希望能找到更好的选择。

标签： javascript angularjs select multiple-select

【解决方案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 link 供您参考。祝你好运！

【讨论】：

谢谢！那真的很有用。使用观察者就可以了。

【解决方案2】：

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

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

【讨论】：