我在同一页面上有几个选择元素。每个选择下拉列表包含相同的项目。如果已经在另一个选择元素中选择了该项目,我想禁用该项目。换句话说,我不希望在所有选择元素中多次选择一个项目。

关于如何实现这一目标的任何想法?

当我使用以下代码时,下拉菜单中没有禁用任何功能。

控制器代码:

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,包括已选择selectoption。由于该选项已被禁用,因此将不再选择该选项。

您需要排除当前的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));
};

09-10 06:40
查看更多