javascript 如果其他选择更改，AngularJS 删除并添加选择框选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14790388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS remove & add select box option if other selection changes
提问by AdrianBorkala
I'm looking for a similar solution to a problemthat has been resolved before with the following code:
我正在寻找类似的解决方案来解决之前使用以下代码解决的问题：
This is the JS that I'm needing to use from the above JSFiddle:
这是我需要从上面的 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');
});
});
});
However, I need to do this in AngularJS, and being a newbie to AngularJS I'm a bit stumped how to "convert" some JS into AngularJS Seed and just need a little bit of guidance.
但是，我需要在 AngularJS 中执行此操作，并且作为 AngularJS 的新手，我对如何将一些 JS“转换”为 AngularJS Seed 感到有些困惑，只需要一点指导。
Essentially I have 3 selection drop downs all which contain the same list (It's a list of people), when a user chooses a name for the first selection, I need that name to be removed from the other 2 selection options. The JSfiddle above demonstrates this perfectly, but I just need to understand how I should be placing this code into AngularJS.
本质上，我有 3 个选择下拉列表，它们都包含相同的列表（这是一个人员列表），当用户为第一个选择选择一个名称时，我需要从其他 2 个选择选项中删除该名称。上面的 JSfiddle 完美地展示了这一点，但我只需要了解我应该如何将此代码放入 AngularJS 中。
Thanks in advance.
提前致谢。
回答by Lee
Here is a fiddle that demonstrates one way of doing this:http://jsfiddle.net/Zv5NE/4/It does not disable them like the jQuery example, it just removes them from the other lists. If you want to disable them then(i think) you would need to use a directive to do it the proper angular way. You may also want to check the docs:http://docs.angularjs.org/api/ng.directive:select
这是一个演示了一种方法的小提琴：http: //jsfiddle.net/Zv5NE/4/它不像 jQuery 示例那样禁用它们，它只是从其他列表中删除它们。如果你想禁用它们，那么（我认为）你需要使用一个指令来以正确的角度方式来完成。您可能还想查看文档：http://docs.angularjs.org/api/ng.directive: select
Here is a snippet:
这是一个片段：
<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>
First use ng-model to set the value that the select binds to. This tells the model(defined in the controller) what is selected and it can also be used to set a default. Then use the ng-options directive to tell what options to show and how to filter them. The options are defined as an array in the controller. So the statement "item as item.name for item in friends" means use the value of item with the label item.name for each item in the array friends. The options and filters are defined in the model.
首先使用 ng-model 设置 select 绑定到的值。这告诉模型（在控制器中定义）选择了什么，它也可用于设置默认值。然后使用 ng-options 指令告诉显示哪些选项以及如何过滤它们。这些选项被定义为控制器中的一个数组。所以语句“item as item.name for item infriends”意味着对数组friends 中的每个项目使用带有标签item.name 的item 值。选项和过滤器在模型中定义。
in selectname2 it uses the filter for friends which looks like "friends|filter:filter1". filter1 is a function defined in the controller that determines which items to show. This filter just returns false for any item whose id matches selectname1 and true otherwise.
在 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'}
];
}
Hope that is helpful
希望有帮助
回答by Jigar Patel
Here is the plunker example of what you are looking for. Select list changes automatically based on your other selection.
这是您正在寻找的 plunker 示例。选择列表会根据您的其他选择自动更改。
http://plnkr.co/edit/yFrYQ1ql9a1x9jd9yGv0
http://plnkr.co/edit/yFrYQ1ql9a1x9jd9yGv0
You can generalize for n number of list and just loop through all of them for any changes.
您可以概括为 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>
Angular code
角码
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;
}
};
});
回答by Lucas Gabriel
$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'>
pick one
选一个
