каскадные выпадения в угловом

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 вместо нг-повтора

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

Затем на мероприятии нг-изменение выбора, вы можете загрузить необходимые данные для следующих выбирает.

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

Вы можете держать другие операторы выбора выключить на основе предыдущих значений выбирают

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

Вы бы нужен дополнительная логика в событиях изменений, чтобы работать или нет, вы должны очистить $scope модели значения, как это требуется, но это довольно просто.