Каскадные опции выбора в угловом

Question

Я не могу получить каскадное выпадающее меню, чтобы выбрать pas первый в угловом. При выборе первого варианта, если у него есть значения для делений Я бы хотел показать их во втором раскрывающемся списке, и если последний имеет значения для рабочих мест Я хотел бы показать их в третьем.

Вот мой HTML

<div ng-controller="SectorController"> 
<select class="form-control" id="businessUnit" ng-model="divisionsSource" 
      ng-options="businessUnit.division as businessUnit.sectorName for businessUnit in businessUnits track by businessUnit.id"> 
       <option value=''>Select</option> 
      </select> 

     <td> 
      <select class="form-control" id="division" ng-model="workplacesSource" ng-disabled="!divisionsSource" 
      ng-options="division.workplace as division.sectorName for division in divisionsSource track by division.id"> 
      <option value=''>Select</option> 
      </select> 

      <select class="form-control" id="workplace" ng-disabled="!workplacesSource || !divisionsSource" ng-model="workplace"> 
      <option value=''>Select</option> 
      <option ng-repeat="workplace in workplacesSource" value='{{workplace}}'>{{workplace}}</option> 
      </select> 

и вот мой JSON корм:

$rootScope.businessUnits = [ 
         { 
         "id": 1, 
         "sectorName": "AAA", 
         "sectorLevel": 20 
         }, 
         { 
         "id": 2, 
         "sectorName": "BBB", 
         "sectorLevel": 20 
         }, 
         { 
         "id": 3, 
         "sectorName": "CCC", 
         "sectorLevel": 20 
         }, 
         { 
         "id": 4, 
         "sectorName": "DDD", 
         "sectorLevel": 20, 
         "divisions": [ 
          { 
          "id": 6, 
          "sectorName": "DDD1", 
          "sectorLevel": 30 
          }, 
          { 
          "id": 7, 
          "sectorName": "DDD2", 
          "sectorLevel": 30 
          }, 
          { 
          "id": 8, 
          "sectorName": "DDD3", 
          "sectorLevel": 30 
          }, 
          { 
          "id": 9, 
          "sectorName": "DDD4", 
          "sectorLevel": 30, 
          "workplaces": [ 
           { 
           "id": 12, 
           "sectorName": "DDD4 SUB1", 
           "sectorLevel": 40 
           }, 
           { 
           "id": 13, 
           "sectorName": "DDD4 SUB2", 
           "sectorLevel": 40 
           } 
          ] 
          }, 
          { 
          "id": 10, 
          "sectorName": "DDD5", 
          "sectorLevel": 30 
          }, 
          { 
          "id": 11, 
          "sectorName": "DDD6", 
          "sectorLevel": 30 
          } 
         ] 
         }, 
         { 
         "id": 5, 
         "sectorName": "EEE", 
         "sectorLevel": 20 
         } 
        ] 

Любой вход будет весьма признателен.

Answer 1

Неверные параметры ng. Вот plunkr, который фиксирует это: http://plnkr.co/edit/GOIiGXAHnr7nUfv4NHVH?p=preview

Пояснение:

businessUnit.division as businessUnit.sectorName 
for businessUnit in businessUnits track by businessUnit.id 

Таким образом, когда выбрана опция в первом окне выбора, его модель (divisionsSource) устанавливаются делением выбранного businessUnit «s. Но у businessUnit нет поля с именем division. Он имеет поле с именем divisions.

Так что код должен быть

businessUnit as businessUnit.sectorName 
for businessUnit in businessUnits track by businessUnit.id 

и следующее окно выбора следует использовать

division as division.sectorName 
for division in divisionsSource.divisions track by division.id