如何使用多个NG选项来处理级联/链接的下拉列表中 [英] How to handle cascading/chained dropdowns using multiple ng-options
问题描述
我想获得下拉列表如果下拉列表上面摆着一些已经选择了只填充。我曾有人点我在正确的是这样开始的方向。
I am trying to get drop downs to only populate if the drop down above them has something selected. I had someone point me in the right starting direction with something like this.
<select class="selectLevel0" ng-model='scope1' ng-change='scope1Change()'
ng-options='obj.name for obj in array track by obj.id'>
</select>
<select class="selectLevel1" ng-model="scope2" ng-change='scope2Change()'
ng-options='obj.name for obj in array2 track by obj.id' ng-hide='!scope1'>
</select>
<select class="selectLevel2" ng-model="scope3" ng-change='scope3Change()'
ng-options='obj.name for obj in array3 track by obj.id' ng-hide='!scope2'>
</select>
<select class="selectLevel3" ng-model="scope4" ng-change='scope4Change()'
ng-options='obj.name for obj in array4 track by obj.id' ng-hide='!scope3'>
</select>
<select class="selectLevel4" ng-model="scope5"
ng-options='obj.name for obj in array5 track by obj.id' ng-hide='!scope4'>
</select>
这是罚款第一轮 - 下面的下拉菜单将不填充直到previous人都有选择的东西。棘手的部分是我想,如果说我已经选择了一路下跌到5日之一,我去一个重新选择第二个一级弄清楚。那么我想第三个层次来显示和4-5消失。我想也许是这样ng_show =!scope2 ||!scope3(或类似的地方我传递多个参数的东西),但我似乎无法得到的东西像角这个工作。是否有处理这个问题的更好方法?
This is fine for the first round - the drop downs below will not populate until the previous one has something selected. The tricky part is I'm trying to figure out if say I have selected all the way down to the 5th one and I go an reselect the 2nd level one. I then want the third level to show up and 4-5 to disappear. I was thinking maybe something like ng_show="!scope2 || !scope3" (or something similar where i pass multiple arguments), but I cannot seem to get something like this working in angular. Is there a better way of dealing with this?
推荐答案
我可能会尽量避免通过重新排列数据中继和调整的逻辑一点。
我只想有一个与 NG-重复
和我的源数据将是一个 2D
阵列。
I would probably try avoid repeating by rearranging the data and tweak the logic a bit.
I would just have one select with ng-repeat
and my source data will be a 2D
array.
例如: -
//It does not matter where i get the data from
$scope.selects = [[{name:'level11', id:1}, {name:'level12', id:2}, {name:'level13', id:3}],
[{name:'level21', id:1}, {name:'level22', id:2}, {name:'level23', id:3}],
[{name:'level31', id:1}, {name:'level32', id:2}, {name:'level33', id:3}],
[{name:'level41', id:1}, {name:'level42', id:2}, {name:'level43', id:3}],
[{name:'level51', id:1}, {name:'level52', id:2}, {name:'level53', id:3}]];
那我就只保留一个数组来存储各自的模型: -
Then i would just keep an array to store respective models:-
$scope.selected = Array.apply(null, { length: $scope.selects.length }).map(Object);
这时只有一个 changehandler
为所有这些,目前通过指数你甚至可以传递数据。
Then have just one changehandler
for all of them, which currently pass index you could even pass data.
$scope.handleChange = function(index) {
//reset data for others when a dropdown in selected
$scope.selected = $scope.selected.map(function(itm, idx){
return (idx > index) ? {} : itm;
});
//This will give you selected value of the current item if you need
var selected = $scope.selected[index];
//DO something with the value
}
最后我的标记也只是: -
And finally my markup would just be:-
<select ng-repeat="select in selects" ng-class="selectLevel{{$index}}"
ng-change='handleChange($index)' <!-- Handler for Change event pass index of even model -->
ng-model='selected[$index].value' <!-- Yes this is the model -->
ng-show='!$index || selected[$index-1].value' <!-- Show only if its previous model has a value -->
ng-options='obj.name for obj in select track by obj.id'>
</select>
Demo
这篇关于如何使用多个NG选项来处理级联/链接的下拉列表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!