我在同一页上选择的几个元素。每个选择下拉列表包含相同的项目。我想,如果它已经在另一个选择元素选择下拉内禁止的项目。换句话说,我不希望一个项目在所有选择元素中选择一次以上。
这是如何做到这一点有什么想法?
当我用下面的code,没有什么是在下拉列表中禁用的。
code的控制器:
VAR editProject =这一点;editProject.addMore =功能(){ editProject.project.fruit.push({});};editProject.fruitids = [ {code:'商品',水果:1。苹果'}, {code:'商品',水果:'2。橙'}, {code:'商品',水果:'3。桃'},];
HTML
< DIV NG重复=项editProject.project.fruits> <选择NG模型=editProject.project.fruits [$指数]NG-选项=fruitid.class组由fruitid。code禁止时(editProject.project.fruits.indexOf((fruitid))!== -1)通过fruitid.class&GT在editProject.fruitids轨道fruitid; <期权价值=> - 选择类别 - < /选项> < /选择>< / DIV><按钮NG点击=editProject.addMore()级=BTN BTN-默认BTN-XS角色=按钮>添加更多的类< /按钮>
解决方案
您需要使用一个函数作为前pression为禁用
参数在 NG-选项
指令。
请参见例1
HTML
<&GT格数据-NG-重复=中的项项; <选择数据-NG选项=fruitId.fruit禁用时fruitIds为fruitId isDisabled(fruitId)数据-NG-模式=项目[$指数]>< /选择> < / DIV>
JS
$ scope.isDisabled =功能(fruitid){ (!$ scope.items.indexOf((fruitid))== -1)回报;};
这将禁止在选项
全部的选择的,包括在
选择
,其中选择了选项
。该选项将现在不能选择,因为它被禁用了。
您需要排除当前 fruitId
所以它仍然在启用所选选择
请参见示例2 其中电流 fruitId
被排除在外,并选定选项
在其他选择
取值
我们确保发现该指数不是当前项目的索引。
HTML
<&GT格数据-NG-重复=中的项项; <选择数据-NG选项=fruitId.fruit禁用isDisabled时(fruitId,项目)用于fruitId在fruitIds数据-NG-模式=项目[$指数]>< /选择>< / DIV>
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 select
s
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));
};
相关推荐
最新文章