层叠下拉的角度

cascading drop downs in angular

本文关键字：更新时间：2023-09-26

我试图得到一些层叠下拉的角度，填充基于什么之前的下拉选择。所以基本上总共有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关中选择的内容重新填充)。所以我只想让它们相互抵消。我想知道这样的东西是否可能在角。抱歉，如果这是有点健忘，我是全新的使用角。谢谢! !

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

<select ng-model='scope1' ng-change='scope1Change()' 
        ng-options='obj.id as obj.name for obj in array'>
</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模型值，但这非常简单

没有找到相关文章