AnglularJS: введите второе выпадающее меню на основе выбора первого выбора-выпадающего списка

Question

У меня есть набор выпадающих меню, я пытаюсь заполнить второе выпадающее меню, основанное на выборе первого выпадающего меню в angularJS. Я не знаю, как на самом деле начать с этого.

У меня есть все готовые модели, но я борюсь с динамическим населением.

Выбрать 1:

<select ng-model="selectedSource" ng-options="source.name for source in sourceList"> 
     <option value="">-- Select item --</option> 
    </select> 

$scope.sourceList= [ 
    { 
     "name":"Person", 
     "has": ["a","b","c"] 
    }, 
    { 
     "name":"Car", 
     "has": ["1","2","3"] 
    } 
]; 

Что я пытаюсь достичь:

Когда sourceList.name является Person Заселите второго выбора-выпадающий targerSet1

$scope.targerSet1= [ 
    { 
     "name":"King Julien" 
    } 
]; 

Когда sourceList.name я s Car Заселите второго выбора-выпадающее меню с targerSet2

$scope.targerSet2= [ 
    { 
     "name":"RoyalMobile" 
    } 
]; 

Answer 1

Вы можете просто использовать переплетены переменную из первого выбора в ng-options из второго:

Выбирается

<select ng-model="selectedSource" ng-options="source.name for source in sourceList"> 
    <option value="">-- Select item --</option> 
</select> 

<select ng-model="selectedItem" ng-options="item.name for item in selectedSource.suboptions"> 
    <option value="">-- Select item --</option> 
</select> 

Контроллер

$scope.sourceList = [ 
    { 
     name: "Person", 
     suboptions: [ 
      { name: "King Julien" } 
     ] 
    }, 
    { 
     name: "Car", 
     suboptions: [ 
      { name: "RoyalMobile" } 
     ] 
    } 
];