如何使用多个 ng-options 处理级联/链式下拉列表 [英] 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>

这对第一轮没问题 - 在前一个选择了某些内容之前，下面的下拉列表不会填充.棘手的部分是我试图弄清楚是否说我一直选择到第 5 个，然后我重新选择第 2 个级别.然后我希望第三级出现，4-5 级消失.我在想也许像 ng_show="!scope2 || !scope3" (或类似的东西，我传递多个参数)，但我似乎无法在 angular 中得到这样的东西.有没有更好的方法来处理这个问题?

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-repeat 的选择，而我的源数据将是一个 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
  }

最后我的标记就是:-

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

演示

这篇关于如何使用多个 ng-options 处理级联/链式下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！