AngularJS多个选择元素不能具有相同的值

我是AngularJS的新手，我正在尝试使用ign-element指令定义4个独立的select元素

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>

app.directive（'playerselect'，function（）{
返回{
限制：'E'，
替换：正确，
templateUrl:'templates/directives/player select.html'，
}
});
斯佩勒

当用户在其中一个select元素中选择一个选项时，我希望其他select元素更新，以便在所有其他select元素中禁用所选选项。基本上，我想确保每个选项只能选择一次

---

有什么办法吗？

我会这样做：

指示

指令模板

控制器模板

---

我会这样做：

指示

指令模板

控制器模板

检查此以查看它的作用

我建议您使用和

因此，在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.$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();
        }
    };
});

angular.module（'fiddleApp'）。指令（'playerSelect'，函数（$rootScope）{
返回{
限制：'E'，
要求：'ngModel'，
范围：{
玩家：'='
},
模板：“”，
链接：功能（范围、el、属性、ngModel）{
函数更新（）{
scope.playersCopy=angular.copy（scope.players）；
如果（选择范围）{
scope.playersCopy.push（scope.selected）；
}
}
范围.$watch（'selected'，函数（newValue，oldValue）{
如果（新值）{
scope.players.splice（scope.players.map）（函数（a）{
返回一个名字
}).indexOf（newValue.name），1）；
if（oldValue）{scope.players.push（oldValue）；}
ngModel.$setViewValue（选择范围）；
$rootScope.$broadcast（'playersUpdate'）；
}
});
作用域：$on（'playersUpdate'，函数（）{
更新（）；
});
更新（）；
}
};
});

检查此以查看它的作用

我建议您使用和

因此，在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.$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();
        }
    };
});

angular.module（'fiddleApp'）。指令（'playerSelect'，函数（$rootScope）{
返回{
限制：'E'，
要求：'ngModel'，
范围：{
玩家：'='
},
模板：“”，
链接：功能（范围、el、属性、ngModel）{
函数更新（）{
scope.playersCopy=angular.copy（scope.players）；
如果（选择范围）{
scope.playersCopy.push（scope.selected）；
}
}
范围.$watch（'selected'，函数（newValue，oldValue）{
如果（新值）{
scope.players.splice（scope.players.map）（函数（a）{
返回一个名字
}).indexOf（newValue.name），1）；
if（oldValue）{scope.players.push（oldValue）；}
ngModel.$setViewValue（选择范围）；
$rootScope.$broadcast（'playersUpdate'）；
}
});
作用域：$on（'playersUpdate'，函数（）{
更新（）；
});
更新（）；
}
};
});

因此，使用

ng选项无法做到这一点。

？@CasCornelissen问题是在禁用ng的情况下使用ng选项。你可以使用ng选项，而不是禁用从玩家列表中删除的选项，这可能会更好。啊，我理解。谢谢你的回答，我会看看我会选择哪条路。@matrik很高兴我能帮上忙。如果回答了您的问题，请选择此作为已批准的答案：），因此使用

ng options

？@CasCornelissen无法执行此操作。问题是使用禁用ng的ng options。你可以使用ng选项，而不是禁用从玩家列表中删除的选项，这可能会更好。啊，我理解。谢谢你的回答，我会看看我会选择哪条路。@matrik很高兴我能帮上忙。如果回答了您的问题，请选择此作为批准答案：）是否可以禁用它们（选项上的

禁用

属性）而不是删除它们？是的，但正如@matrik所说，您将无法在

选择

上使用ng选项，是否可以禁用它们（

禁用了选项上的

属性）而不是删除它们？是的，但正如@matrik所说，您将无法在

选择

<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'
}];

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();
        }
    };
});