AngularJS remove & add select box option if other selection changes

Question

I\'m looking for a similar solution to a problem that has been resolved before with the following code:

http://jsfiddle.net/yLCVf/1/

This is the JS that I\'m

Answer 1

Here is the plunker example of what you are looking for. Select list changes automatically based on your other selection.

http://plnkr.co/edit/yFrYQ1ql9a1x9jd9yGv0

You can generalize for n number of list and just loop through all of them for any changes.

    


  
    
    
    
    
  

  
    
Hello {{name}}
    

      First List: -- pick one --   {{first.option.name}}
    
    

      Second List: -- pick one -- {{second.option.name}}
    
    

      Third List: -- pick one -- {{third.option.name}}
    
    
  

Angular code

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.masterlist = 
      [ {name: 'John', selected: false}, {name: 'Bill', selected: false},
        {name: 'Smith', selected: false}, {name: 'Alex', selected: false},
        {name: 'Martin', selected: false}, {name: 'James', selectes: false}];

  $scope.first = {list: angular.copy($scope.masterlist), option: null};
  $scope.second = {list: angular.copy($scope.masterlist), option: null};
  $scope.third = {list: angular.copy($scope.masterlist), option: null};

  $scope.onChange = function(){
    $scope.enableAllOptions($scope.first.list);
    $scope.enableAllOptions($scope.second.list);
    $scope.enableAllOptions($scope.third.list);

    $scope.disableOptions($scope.first.list, $scope.second.list, $scope.second.option);
    $scope.disableOptions($scope.first.list, $scope.third.list, $scope.third.option);

    $scope.disableOptions($scope.second.list, $scope.first.list, $scope.first.option);
    $scope.disableOptions($scope.second.list, $scope.third.list, $scope.third.option);

    $scope.disableOptions($scope.third.list, $scope.first.list, $scope.first.option);
    $scope.disableOptions($scope.third.list, $scope.second.list, $scope.second.option);
  };

  //Enable all options by default.
  $scope.enableAllOptions = function(arr)
  {
    for(var i=0;i=0) destArr[index].selected = true;
    }
  };

});