如何在角阵列内有条件地停用一个目的 [英] How to conditionally disable an object within an array in Angular

问题描述

我在同一页上选择的几个元素。每个选择下拉列表包含相同的项目。我想，如果它已经在另一个选择元素选择下拉内禁止的项目。换句话说，我不希望一个项目在所有选择元素中选择一次以上。

这是如何做到这一点有什么想法？

当我用下面的code，没有什么是在下拉列表中禁用的。

code的控制器：

  VAR editProject =这一点;editProject.addMore =功能（）{  editProject.project.fruit.push（{}）;
};
editProject.fruitids = [  {code：'商品'，水果：1。苹果'}，
  {code：'商品'，水果：'2。橙'}，
  {code：'商品'，水果：'3。桃'}，
];
 

HTML

 ＆LT; D​​IV NG重复=项editProject.project.fruits＆GT;  ＆LT;选择NG模型=editProject.project.fruits [$指数]
NG-选项=fruitid.class组由fruitid。code禁止时（editProject.project.fruits.indexOf（（fruitid））！== -1）
通过fruitid.class＆GT在editProject.fruitids轨道fruitid;    ＆LT;期权价值=＆GT;  - 选择类别 - ＆LT; /选项＆GT;  ＆LT; /选择＆GT;＆LT; / DIV＆GT;＆LT;按钮NG点击=editProject.addMore（）级=BTN BTN-默认BTN-XS角色=按钮＆gt;添加更多的类
＆LT; /按钮＆GT;
 

解决方案

您需要使用一个函数作为前pression为禁用参数在 NG-选项指令。

请参见例1

HTML

 ＆LT;＆GT格数据-NG-重复=中的项项;
     ＆LT;选择数据-NG选项=fruitId.fruit禁用时fruitIds为fruitId isDisabled（fruitId）数据-NG-模式=项目[$指数]＆GT;＆LT; /选择＆GT;
  ＆LT; / DIV＆GT;
 

JS

  $ scope.isDisabled =功能（fruitid）{
    （！$ scope.items.indexOf（（fruitid））== -1）回报;
};
 

这将禁止在选项 全部的选择的，包括在 选择，其中选择了选项。该选项将现在不能选择，因为它被禁用了。

您需要排除当前 fruitId 所以它仍然在启用所选选择

请参见示例2 其中电流 fruitId 被排除在外，并选定选项在其他选择取值

禁用

我们确保发现该指数不是当前项目的索引。

HTML

 ＆LT;＆GT格数据-NG-重复=中的项项;
    ＆LT;选择数据-NG选项=fruitId.fruit禁用isDisabled时（fruitId，项目）用于fruitId在fruitIds数据-NG-模式=项目[$指数]＆GT;＆LT; /选择＆GT;
＆LT; / DIV＆GT;
 

JS

  $ scope.isDisabled =功能（fruitid，项目）{
    回报（！$ scope.items.indexOf（（fruitid））== -1放大器;＆安培; $ scope.items.indexOf（（fruitid））= $ scope.items.indexOf（项目）！）;
};
 

I have several select elements on the same page. Each select dropdown contains the same items. I would like to disable an item within the dropdown if it has already been selected in another select element. In other words, I don't want an item to be selected more than once across all of the select elements.

Any thoughts on how to accomplish this?

When I use the following code, nothing is disabled in the dropdown.

Code for controller:

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>

解决方案

You need to use a function as the expression for the disable parameter in the ng-options directive.

Please see working 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);
};

This will disable the option in all the select's including the the select where the option was selected. The option will now not be selected any more as it is disabled.

You need to exclude the current fruitId so it is still enabled in the selected select

Please see example2 where the current fruitId is excluded and the selected option is disabled in the other selects

We make sure that the index found is not the index of the current item.

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));
};

这篇关于如何在角阵列内有条件地停用一个目的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！