Question

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

这是我需要在上面的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

这是一个小提琴，演示了一种方法：http://jsfiddle.net/Zv5NE/4/ 它不像jQuery示例那样禁用它们，它只是将它们从其他列表中删除。如果你想禁用它们，那么（我认为）你需要使用一个指令来正确的角度方式。您可能还想查看文档：{{3}}

这是一个片段：

  <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绑定的值。这告诉模型（在控制器中定义）选择了什么，它也可以用来设置默认值。然后使用ng-options指令告诉要显示的选项以及如何过滤它们。选项定义为控制器中的数组。因此，声明“item as item.name for friends in friends”意味着使用item的值与数组friends中的每个项目的标签item.name。选项和过滤器在模型中定义。

在selectname2中，它使用过滤器看起来像“friends | filter：filter1”的朋友。 filter1是控制器中定义的函数，用于确定要显示的项目。对于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'}
    ];
}

希望有帮助

Answer 2

以下是您正在寻找的内容示例。根据您的其他选择自动选择列表更改。

http://plnkr.co/edit/yFrYQ1ql9a1x9jd9yGv0

您可以对n个列表进行推广，只需遍历所有列表即可进行任何更改。

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

角度代码

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

});

Answer 3

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

选择一个

AngularJS删除＆amp;如果其他选择更改，请添加选择框选项

3 个答案: