Question

我试图根据之前下拉选择的内容填充一些角度级联下拉。所以基本上总共有5个下降，首先只会填充第一个下拉，然后第二个将根据第一个中选择的内容进行填充（希望使用$ http来获取新信息表单服务器基础不要被挑选的东西等等一直到5。

基本上我有这个：

<select class="selectScope" ng-model="scope1">
                        <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
                    </select>
                    <select class="selectLevel1" ng-model="scope2">
                        <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
                    </select>
                    <select class="selectLevel2" ng-model="scope3">
                        <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
                    </select>
                    <select class="selectLevel3" ng-model="scope4">
                        <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
                    </select>
                    <select class="selectLevel4" ng-model="scope5">
                        <option ng-repeat="obj in array" value="{{obj.id}}">{{obj.name}}</option>
                    </select>

我将使用$ http填充第一个下拉列表，但是没有详细说明我只是想知道我是否可以让下拉菜单相互触发。如果我一直选择到5级并且我重新选择3级 - 则4和5将为空（4将根据3中选取的内容重新填充）。所以我只是希望他们互相帮助。我想知道这样的东西是否有可能是有角度的。抱歉，如果这有点不经意，我是使用角度的全新。谢谢！

Answer 1

首先，您应该使用ng-options而不是ng-repeat

<select ng-model='scope1' ng-change='scope1Change()' 
        ng-options='obj.id as obj.name for obj in array'>
</select>

然后，在select的ng-change事件中，您可以为以下选择加载适当的数据。

$scope.scope1Change = function() {
          //Build URL based on selection
          $http.get(myUrl).then(function(data){
          //transform data if required
           $scope.array2 = data;
    });
}

您可以根据之前选择的值

禁用其他select语句

<select class="selectLevel1" ng-model="scope2" 
        ng-options='obj.id as obj.name for obj in array2' ng-disabled='!scope1'>
</select>

您需要在更改事件中使用一些额外的逻辑来确定是否应根据需要清除$scope模型值，但这非常简单

角度下降级联下降

1 个答案: