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 needing to use from the above JSFiddle:

$(document).ready(function () {
    $('select.hello').change(function () {
        $('select.hello option').attr('disabled', false);
        $('select.hello').each(function() {
            var val = $(this).find('option:selected').val();
            if (!val) return;
            $('select.hello option').filter(function() {
                return $(this).val() == val;
            }).attr('disabled', 'disabled');
        });
    });
});

However, I need to do this in AngularJS, and being a newbie to AngularJS I'm a bit stumped how to "convert" some JS into AngularJS Seed and just need a little bit of guidance.

Essentially I have 3 selection drop downs all which contain the same list (It's a list of people), when a user chooses a name for the first selection, I need that name to be removed from the other 2 selection options. The JSfiddle above demonstrates this perfectly, but I just need to understand how I should be placing this code into AngularJS.

Thanks in advance.

Answer 1

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