angularjs – 如何在Angular中有条件地禁用数组中的对象

发布时间：2020-12-17 17:15:35 所属栏目：安全来源：网络整理

导读：我在同一页面上有几个选择元素.每个选择下拉列表包含相同的项目.如果已经在另一个select元素中选择了项目,我想在下拉列表中禁用该项目.换句话说,我不希望在所有选择元素中多次选择项目. 有关如何实现这一点的任何想法？当我使用以下代码时,下拉列表中没有禁

我在同一页面上有几个选择元素.每个选择下拉列表包含相同的项目.如果已经在另一个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>

$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>

$scope.isDisabled = function(fruitid,item) {
    return ($scope.items.indexOf((fruitid)) !== -1 && $scope.items.indexOf((fruitid)) != $scope.items.indexOf(item));
};

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!