我在同一页面上有几个选择元素.每个选择下拉列表包含相同的项目.如果已经在另一个select元素中选择了项目,我想在下拉列表中禁用该项目.换句话说,我不希望在所有选择元素中多次选择项目.
有关如何实现这一点的任何想法？
控制器代码：
var editProject = this;
editProject.addMore = function() {
editProject.project.fruit.push({});
};
editProject.fruitids = [
{code: 'GOODS',fruit: '1. Apple'},{code: 'GOODS',fruit: '2. Orange'},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>
解决方法
您需要使用函数作为ng-options指令中disable参数的表达式.
请参阅工作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);
};
这将禁用所有选项中的选项,包括选择选项的选项.现在不再选择该选项,因为它已被禁用.
您需要排除当前的fruitId,以便在所选的选择中仍然启用它
请参阅example2,其中排除当前fruitId,并在其他选择中禁用所选选项
我们确保找到的索引不是当前项的索引.
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));
};
