在使用Angularjs的其他多选选项字段中禁用选定的选项

Question

我是Angularjs的新手。 我要附加动态多选框，我的问题是，我想禁用其他多选框中的所有选定选项。 我已经尝试在Angular中为同一项目的其他Select Option字段禁用Angular中的选定项目，答案是上述链接的答案，但这是针对选择框而不是针对多重选择的。 我已经尝试了多选的答案，但有一些复杂之处。

上面的链接用于动态选择框。 我想在多选中做同样的事情。

Answer 1

您可以在ngOptions使用disable when来禁用和filter以删除项目：

 angular.module("app", []).controller('MainController', MainController); function MainController($scope) { vm = this; vm.optionsA = [1, 2, 3, 4]; vm.optionsB = [1, 2, 3, 4]; vm.optionsC = [1, 2, 3, 4]; vm.selectA = []; vm.selectB = []; vm.selectC = []; vm.disable = function(i) { return vm.selectA.indexOf(i) >= 0; } vm.filter = function(i) { return vm.selectA.indexOf(i) < 0; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <div ng-app="app" ng-controller="MainController as ctrl"> <select multiple ng-model="ctrl.selectA" ng-options="t for t in ctrl.optionsA"> </select> {{ctrl.selectA}} <select multiple ng-model="ctrl.selectB" ng-options="t disable when ctrl.disable(t) for t in ctrl.optionsB"> </select> {{ctrl.selectB}} <select multiple ng-model="ctrl.selectC" ng-options="t for t in ctrl.optionsC | filter:ctrl.filter"> </select> </div>