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

$scope.filesList    = FileService.getFiles();
$scope.listsList    = [];
$scope.items = ['settings', 'home', 'other'];
$scope.selection = $scope.items[0];
//esse scope file options mudará depois vou pegar diretamente do banco.
$scope.filesOptions = [
    {
        'filetype'  : 1,
        'filelabel' : 'OPÇÃO A',
        'selected'  : false
    },
    {
        'filetype'  : 2,
        'filelabel' : 'OPÇÃO B',
        'selected'  : false
    },
    {
        'filetype'  : 3,
        'filelabel' : 'OPÇÃO C',
        'selected'  : false
    },
    {
        'filetype'  : 4,
        'filelabel' : 'OPÇÃO D',
        'selected'  : false
    },
    {
        'filetype'  : 5,
        'filelabel' : 'OPÇÃO E',
        'selected'  : false
    }
];

 for (index = 0; index < $scope.filesList.length; ++index) {

$scope.listsList.push({list: angular.copy($scope.filesOptions), option: null});}

$scope.onChange = function(){
    //tgt.selected = true;
    for (var i = 0; i < $scope.listsList.length; ++i) {
        var current = $scope.listsList[i];
        $scope.enableAllOptions(current.list);
        for (var j = 0; j < $scope.listsList.length; ++j) {
            if(current != $scope.listsList[j]){
                $scope.disableOptions(current.list, $scope.listsList[j].list, $scope.listsList[j].option);
            }
        }
    }
};
//Enable all options by default.
$scope.enableAllOptions = function(arr){ for(var i=0;i<arr.length;i++){ arr[i].selected = false;} };
//Function that takes the destinationArr , Source Arry , and Source selected item
$scope.disableOptions = function(destArr, srcArr, srcItem) {
    if(srcItem !== null) {
        var index = srcArr.indexOf(srcItem);
        if(index >=0) destArr[index].selected = true;
    }
};


<div class="col-md-9"><select ng-change="onChange()" ng-options='op.filelabel for op in  listsList[$index].list | filter:{selected: false}' ng-model='listsList[$index].option'>

pick one

Answer 2

Here is a fiddle that demonstrates one way of doing this:http://jsfiddle.net/Zv5NE/4/ It does not disable them like the jQuery example, it just removes them from the other lists. If you want to disable them then(i think) you would need to use a directive to do it the proper angular way. You may also want to check the docs:http://docs.angularjs.org/api/ng.directive:select

Here is a snippet:

  <select 
    ng-model="selectname1" 
    ng-options="item as item.name for item in friends|filter:filter2|filter:filter3" >
    <option value="">- select -</option>
  </select>

   <select 
     ng-model="selectname2" 
     ng-options="item as item.name for item in friends|filter:filter1|filter:filter3" >
     <option value="">- select -</option>
   </select>

First use ng-model to set the value that the select binds to. This tells the model(defined in the controller) what is selected and it can also be used to set a default. Then use the ng-options directive to tell what options to show and how to filter them. The options are defined as an array in the controller. So the statement "item as item.name for item in friends" means use the value of item with the label item.name for each item in the array friends. The options and filters are defined in the model.

in selectname2 it uses the filter for friends which looks like "friends|filter:filter1". filter1 is a function defined in the controller that determines which items to show. This filter just returns false for any item whose id matches selectname1 and true otherwise.

function HelloCntl($scope) {
    $scope.selectname1={};    
    $scope.selectname2={};    
    $scope.selectname3={};

    $scope.filter1 = function(item){
      return (!($scope.selectname1&&$scope.selectname1.id)||item.id !=$scope.selectname1.id);
    };

    $scope.filter2 = function(item){
      return (!($scope.selectname2&&$scope.selectname2.id)||item.id!=$scope.selectname2.id);
    };
    $scope.filter3 = function(item){
      return (!($scope.selectname3&&$scope.selectname3.id)||item.id !=$scope.selectname3.id);
    };
    $scope.friends = [
      {
        id:1,name: 'John',
        phone: '555-1276'},
      {
        id:2,name: 'Mary',
        phone: '800-BIG-MARY'},
      {
        id:3,name: 'Mike',
        phone: '555-4321'},
      {
        id:4,name: 'Adam',
        phone: '555-5678'},
      {
        id:5,name: 'Julie',
        phone: '555-8765'}
    ];
}

Hope that is helpful

Answer 3

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.

    <!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>Hello {{name}}</h1>
    <p>
      First List: <select ng-change="onChange()" ng-options='person.name for person in  first.list | filter:{selected: false}' ng-model='first.option'><option value="">-- pick one --</option>  </select> {{first.option.name}}
    </p>
    <p>
      Second List: <select ng-change="onChange()" ng-options='person.name for person in  second.list | filter:{selected: false}' ng-model='second.option'><option value="">-- pick one --</option></select> {{second.option.name}}
    </p>
    <p>
      Third List: <select ng-change="onChange()" ng-options='person.name for person in  third.list | filter:{selected: false}' ng-model='third.option'><option value="">-- pick one --</option></select> {{third.option.name}}
    </p>
    </select>
  </body>

</html>

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<arr.length;i++)
    {
      arr[i].selected = false;
    }
  };

  //Function that takes the destinationArr , Source Arry , and Source selected item
  $scope.disableOptions = function(destArr, srcArr, srcItem)
  {
    if(srcItem !== null)
    {
      var index = srcArr.indexOf(srcItem);
      if(index >=0) destArr[index].selected = true;
    }
  };

});