Элементы множественного выбора AngularJS не могут иметь одинаковое значение

Question

Я довольно новичок в AngularJS, и я пытаюсь определить 4 отдельных элемента элементов для выбора элементов usign.

app.directive('playerselect', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     templateUrl: 'templates/directives/player-select.html', 
    } 
}); 

<select ng-options="player.full_name for player in players"> 
    <option value="" selected disabled>Kies een speler</option> 
</select> 

Когда пользователь выбирает опцию в одном из выбранных элементов, которые я хочу другие выбрать элементы, которые будут обновляться, так что выбранный вариант получает отключен во всех остальных выбранных элементах. В принципе, я хочу убедиться, что каждый вариант можно выбрать только один раз.

Любые идеи о том, как это сделать?

Answer 1

Я хотел бы сделать это следующим образом:

директива

app.directive('playerSelect', function() { 
    return { 
     templateUrl: ... 
     scope: { 
      players: '=', 
      selectedPlayer: '=', 
      selectedPlayers: '=', 
     }, 
     controller: function($scope) { 
      $scope.isDisabled = function(player) { 
       return $scope.selectedPlayers.indexOf(player) > -1 && 
         player !== $scope.selectedPlayer) 
      }; 
     }, 
    } 
}); 

шаблон директива

<select ng-model="selectedPlayer"> 
    <option ng-repeat="player in players" ng-disabled="isDisabled(player)">{{player}}</option> 
</select> 

контроллер

app.controller('PlayerController', function($scope) { 
    $scope.players = ... 
    $scope.selectedPlayers = [ 
     $scope.player1, 
     $scope.player2, 
     $scope.player3, 
     $scope.player4, 
    ]; 
}); 

шаблон контроллер

<div ng-controller="PlayerController"> 
    <player-select players="players" selected-players="selectedPlayers" selected-player="player1"></player-select> 
    <player-select players="players" selected-players="selectedPlayers" selected-player="player2"></player-select> 
    <player-select players="players" selected-players="selectedPlayers" selected-player="player3"></player-select> 
    <player-select players="players" selected-players="selectedPlayers" selected-player="player4"></player-select> 
</div> 

Answer 2

Проверить это jsFiddle для увидеть его в действии.

Я бы порекомендовал вам использование directive two way data binding и ngModelController.

Так что в вашем HTML:

<player-select players="players" ng-model="select1"></player-select> 
<player-select players="players" ng-model="select2"></player-select> 
<player-select players="players" ng-model="select3"></player-select> 

В контроллере:

$scope.players = [{ 
    name: 'foo' 
}, { 
    name: 'bar' 
}, { 
    name: 'baz' 
}]; 

И директивы, используя scope.$watch для обновления каждого списка:

angular.module('fiddleApp').directive('playerSelect', function ($rootScope) { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     scope: { 
      players: '=' 
     }, 
     template: '<select ng-model="selected" ng-options="player.name for player in  playersCopy"></select>', 
     link: function (scope, el, attrs, ngModel) { 

      function update() { 
       scope.playersCopy = angular.copy(scope.players); 
       if (scope.selected) { 
        scope.playersCopy.push(scope.selected); 
       } 
      } 

      scope.$watch('selected', function (newValue, oldValue) { 
       if (newValue) { 
        scope.players.splice(scope.players.map(function (a) { 
         return a.name 
        }).indexOf(newValue.name), 1); 

        if (oldValue) { scope.players.push(oldValue); } 

        ngModel.$setViewValue(scope.selected); 
        $rootScope.$broadcast('playersUpdate'); 
       } 
      }); 

      scope.$on('playersUpdate', function() { 
       update(); 
      }); 

      update(); 
     } 
    }; 
});