![](/img/trans.png)
[英]Disable selected options in other multi select option fields of the using Angularjs
[英]Disabled selected item in Angular for other Select Option Fields of the same Items
我一直在努力奋斗......我目前正在使用Angular。
假设我们有五个选择选项字段,我们正在迭代每个选项字段的相同列表。
我们的选择是:
$scope.items = [one, two, three, four, five];
如果我选择一个,如何禁用剩余选择选项字段的选定选项? 如果我转到另一个选择选项字段并选择一个可用项目,则会为所有其他字段禁用该项目。
任何帮助甚至指导如何做到这一点将不胜感激。 谢谢
您可能需要两种可能的解决方案,具体取决于您的规范要求的禁用类型。
select
元素中选择的项目来禁用。 此解决方案需要一个过滤器,用于删除已选择的项目,但当前select
标记所选的当前项目除外。 使用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
<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
属性设置为选项来disabled
,这实际上是一种解决问题的复杂方法,因为它不使用标准的角度select
ng-option
语法。 通过使用ng-repeat
迭代项目并添加ng-disabled
表达式,该表达式将当前所选项目与其他select
元素中的其他所选项目进行评估。 使用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
<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
是你的朋友,但我认为你可能在IE中遇到动态选择的一些问题。 http://plnkr.co/edit/Ca6l2sHjN2PRykidm9kx?p=preview
您可以使用ng-disabled。
<select ng-options="item in items" ng-model="selectedItem" ng-disabled="selectedItem"></select>
这里的工作示例: http : //jsfiddle.net/astrojason/4njwhdua/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.