[英]Disabled selected item in Angular for other Select Option Fields of the same Items
I've been struggling on this for a while... I'm currently using Angular. 我一直在努力奋斗......我目前正在使用Angular。
Let's say we have five select option fields and that we are iterating through the same list for each one. 假设我们有五个选择选项字段,我们正在迭代每个选项字段的相同列表。
Our options are: 我们的选择是:
$scope.items = [one, two, three, four, five];
If I choose one, how would I disable the selected option for the remaining select option fields? 如果我选择一个,如何禁用剩余选择选项字段的选定选项? And if I go to another select option field and select an available item, it then disables that item for all the other fields.
如果我转到另一个选择选项字段并选择一个可用项目,则会为所有其他字段禁用该项目。
Any help or even guidance on how to do this would be appreciated. 任何帮助甚至指导如何做到这一点将不胜感激。 Thanks
谢谢
There are two possible solutions that you may want, and it depends on what kind of disabling your specs require. 您可能需要两种可能的解决方案,具体取决于您的规范要求的禁用类型。
select
elements. select
元素中选择的项目来禁用。 This solution requires a filter that removes the items that has already been selected except for the current item that the current select
tag has selected. select
标记所选的当前项目除外。 Javascript 使用Javascript
.controller('Ctrl', function($scope) {
$scope.items = [1,2,3,4,5];
$scope.data = [];
})
.filter('arrayDiff', function() {
return function(array, diff) {
var i, item,
newArray = [],
exception = Array.prototype.slice.call(arguments, 2);
for(i = 0; i < array.length; i++) {
item = array[i];
if(diff.indexOf(item) < 0 || exception.indexOf(item) >= 0) {
newArray.push(item);
}
}
return newArray;
};
});
HTML HTML
<select
ng-repeat="(modelIndex, itemValue) in items track by modelIndex"
ng-model="data[modelIndex]"
ng-options="item for item in $parent.items | arrayDiff:data:data[modelIndex]">
<option value="">Select Number</option>
</select>
disabled
property to the option items, this is actually a complex way of solving the problem as it does not use the standard angular select
ng-option
syntax. disabled
属性设置为选项来disabled
,这实际上是一种解决问题的复杂方法,因为它不使用标准的角度select
ng-option
语法。 By using an ng-repeat
to iterate over items and add an ng-disabled
expression that evaluates the current selected item against other selected items from other select
elements. ng-repeat
迭代项目并添加ng-disabled
表达式,该表达式将当前所选项目与其他select
元素中的其他所选项目进行评估。 Javascript 使用Javascript
.controller('Ctrl', function($scope) {
this.items = ['1', '2', '3', '4', '5'];
this.data = [];
})
.filter('hasIntersection', function() {
return function(item, array) {
return array.indexOf(item) >= 0;
};
});
HTML HTML
<select
ng-repeat="(selectIndex, itemValue) in Demo.items"
ng-model="Demo.data[selectIndex]">
<option value="" ng-selected="Demo.data[selectedIndex] == item">
Select Number
</option>
<option ng-repeat="item in Demo.items"
value="{{item}}"
ng-disabled="item | hasIntersection:Demo.data"
ng-selected="Demo.data[selectIndex] == item">
{{item}}
</option>
</select>
ng-disabled
is your friend here, however I think you may face some problems with dynamic selects in IE. ng-disabled
是你的朋友,但我认为你可能在IE中遇到动态选择的一些问题。 http://plnkr.co/edit/Ca6l2sHjN2PRykidm9kx?p=preview http://plnkr.co/edit/Ca6l2sHjN2PRykidm9kx?p=preview
You can use ng-disabled. 您可以使用ng-disabled。
<select ng-options="item in items" ng-model="selectedItem" ng-disabled="selectedItem"></select>
Working example here: http://jsfiddle.net/astrojason/4njwhdua/ 这里的工作示例: http : //jsfiddle.net/astrojason/4njwhdua/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.