0

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.

Kannan K
  • 4,411
  • 1
  • 11
  • 25

1 Answers1

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>
hansmaad
  • 18,417
  • 9
  • 53
  • 94
  • Now, it's even more unclear what you're asking. Give an example of what should happen. – hansmaad Oct 13 '17 at 09:31
  • Please see this link for disabling select option, same thing i need for multi select. http://plnkr.co/edit/BBqnTlxobUpiYxfhyJuj?p=preview – Kannan K Oct 13 '17 at 09:34
  • @KannanK So you don't want to disable, but you want to remove the selected values from the other boxes? – hansmaad Oct 13 '17 at 09:40
  • Disable or remove @hansmaad I want to stop selecting the same option again in the another select box. – Kannan K Oct 13 '17 at 09:49
  • Ok, then it's the other way around. I updated my code with axample for disable and removal. – hansmaad Oct 13 '17 at 09:57
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/156643/discussion-between-kannan-k-and-hansmaad). – Kannan K Oct 13 '17 at 10:01