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

Question

I am new to Angularjs. I am appending dynamic multi select boxes, what is my question is, I want to disable all the selected options in other multi select boxes. I have tried Disabled selected item in Angular for other Select Option Fields of the same Items the answer from the above link, but it is for select box not for multi select. I have tried the answer for multi select, but there is some complication.

The above link is for dynamic select box. I want to do the same thing in multiselect.

Answer 1

You can use disable when in ngOptions to disable, and filter to remove items:

 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>