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

Posted 2023-03-16

【中文标题】在多项选择中更改时获取在 ng-option 中选择的新值

【英文标题】：Get new value selected in ng-option on change in a multiple select

【发布时间】：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”的索引是否已经在所选选项中时。不过不是很好，希望能找到更好的选择。

【参考方案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