4

我正在寻找一个类似的解决方案来解决之前使用以下代码解决的问题：

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

提前致谢。

4

3 回答 3

8

这是一个演示这样做的一种方法的小提琴：http://jsfiddle.net/Zv5NE/4/ 它不像 jQuery 示例那样禁用它们，它只是将它们从其他列表中删除。如果您想禁用它们（我认为），您需要使用指令以正确的角度方式进行操作。您可能还想查看文档：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 设置选择绑定的值。这告诉模型（在控制器中定义）选择了什么，它也可以用来设置默认值。然后使用 ng-options 指令来告诉显示哪些选项以及如何过滤它们。这些选项被定义为控制器中的一个数组。所以语句“item as item.name for item in friends”意味着对数组friends中的每个项目使用带有标签item.name的item的值。选项和过滤器在模型中定义。

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

希望有帮助

于 2013-02-10T00:13:25.290 回答
1

这是您正在寻找的 plunker 示例。选择列表会根据您的其他选择自动更改。

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

});
于 2013-02-10T00:28:23.847 回答
0 
$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'>

选一个

于 2015-10-23T18:43:44.687 回答