我在同一页面上有几个选择元素。每个选择下拉列表包含相同的项目。如果已经在另一个选择元素中选择了该项目,我想禁用该项目。换句话说,我不希望在所有选择元素中多次选择一个项目。
关于如何实现这一目标的任何想法?
当我使用以下代码时,下拉菜单中没有禁用任何功能。
控制器代码:
var editProject = this;
editProject.addMore = function() {
editProject.project.fruit.push({});
};
editProject.fruitids = [
{code: 'GOODS', fruit: '1. Apple'},
{code: 'GOODS', fruit: '2. Orange'},
{code: 'GOODS', fruit: '3. Peach'},
];
HTML:
<div ng-repeat="item in editProject.project.fruits">
<select ng-model="editProject.project.fruits[$index]"
ng-options="fruitid.class group by fruitid.code disable when (editProject.project.fruits.indexOf((fruitid)) !== -1)
for fruitid in editProject.fruitids track by fruitid.class">
<option value="">--Select Class--</option>
</select>
</div>
<button ng-click="editProject.addMore()" class="btn btn-default btn-xs" role="button">Add More Classes
</button>
最佳答案
您需要使用一个函数作为disable
指令中ng-options
参数的表达式。
请参见工作example1
的HTML
<div data-ng-repeat="item in items">
<select data-ng-options="fruitId.fruit disable when isDisabled(fruitId) for fruitId in fruitIds" data-ng-model="items[$index]"></select>
</div>
JS
$scope.isDisabled = function(fruitid) {
return ($scope.items.indexOf((fruitid)) !== -1);
};
这将禁用所有
option
中的select
,包括已选择select
的option
。由于该选项已被禁用,因此将不再选择该选项。您需要排除当前的
fruitId
,以便在选定的select
中仍将其启用请参阅example2,其中排除了当前
fruitId
,并且在其他option
中禁用了选定的select
我们确保找到的索引不是当前项目的索引。
的HTML
<div data-ng-repeat="item in items">
<select data-ng-options="fruitId.fruit disable when isDisabled(fruitId, item) for fruitId in fruitIds" data-ng-model="items[$index]"></select>
</div>
JS
$scope.isDisabled = function(fruitid, item) {
return ($scope.items.indexOf((fruitid)) !== -1 && $scope.items.indexOf((fruitid)) != $scope.items.indexOf(item));
};