AngularJS删除及是否有其他选择改变

我正在寻找一个类似的解决方案，以一个problem已与下面的代码解决之前添加选择框选项：AngularJS删除及是否有其他选择改变

这是JS，我“M需要从上述的jsfiddle使用：

$(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种子和只需要一点点g uidance。

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

在此先感谢。

来源

2013-02-09 AdrianBorkala

这是一个小提琴，演示了这样做的一种方式：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-模型设定值的选择结合到。这告诉模型（在控制器中定义）什么被选中，它也可以用来设置默认值。然后使用ng-options指令来告诉要显示的选项以及如何过滤它们。这些选项被定义为控制器中的数组。因此，“作为朋友中物品的item.name的商品”这个陈述意味着对于数组朋友中的每个商品使用带有标签item.name的商品的价值。选项和过滤器在模型中定义。

in selectname2它使用过滤器的朋友看起来像“朋友|过滤器：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-10 00:13:25 Lee

清洁的解决方案，但自下而上选择不筛选出的选择 – 2013-02-10 10:30:35

没问题，只需添加一个过滤功能为第三次选择并在所有三个选择上放置适当的过滤器。代码和jsfiddle更新。 – Lee 2013-02-10 13:09:46

+1，现在没关系 – 2013-02-10 15:56:47

下面是你在找什么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-10 00:28:23

你可以请告诉如何在angularjs 2.0中做到这一点，这将是非常有用的 – 2016-06-30 06:03:04

$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-23 18:43:44

AngularJS删除及是否有其他选择改变

回答

相关问题