javascript - 如果其他选择更改，AngularJS 删除并添加选择框选项

Question

我正在寻找与 problem 类似的解决方案之前已使用以下代码解决:

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

这是我需要从上面的 JSFiddle 使用的 JS:

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

但是，我需要在 AngularJS 中执行此操作，作为 AngularJS 的新手，我对如何将一些 JS“转换”为 AngularJS Seed 有点困惑，只需要一点指导。

基本上我有 3 个选择下拉列表，它们都包含相同的列表(这是一个人员列表)，当用户为第一个选择选择一个名字时，我需要将该名字从其他 2 个选择选项中删除。上面的 JSfiddle 完美地演示了这一点，但我只需要了解我应该如何将这段代码放入 AngularJS 中。

提前致谢。

Answer 1

这是一个 fiddle ，演示了一种方法:http://jsfiddle.net/Zv5NE/4/ 它不会像 jQuery 示例那样禁用它们，它只是将它们从其他列表中删除。如果你想禁用它们，那么(我认为)你需要使用指令以正确的 Angular 方式进行操作。您可能还想查看文档:http://docs.angularjs.org/api/ng.directive:select

这是一个片段:

  <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>

首先使用 ng-model 设置 select 绑定(bind)的值。这告诉模型(在 Controller 中定义)选择了什么，它也可用于设置默认值。然后使用 ng-options 指令来告诉要显示的选项以及如何过滤它们。这些选项在 Controller 中定义为一个数组。所以语句“item as item.name for item in friends”意味着使用带有标签 item.name 的 item 的值作为数组 friends 中的每个项目。选项和过滤器在模型中定义。

在 selectname2 中，它使用类似于“friends|filter:filter1”的 friend 过滤器。 filter1 是在 Controller 中定义的函数，用于确定要显示的项目。此过滤器仅对 ID 与 selectname1 匹配的任何项目返回 false，否则返回 true。

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

希望对你有帮助