Как показать родителя и детей с помощью ng-options

Question

Я хочу создать ng-опции с помощью которых я могу выбирать элементы из родительского объекта и дочерних объектов. Мой JSON выглядит так:

{
"errors":[

],
"headquarters":{
  "id":1,
  "name":"headquarter name",
  "departments":[
     {
        "id":2,
        "name":"department A name",
        "divisions":[
           {
              "id":6,
              "name":"Division A name"
           },
           {
              "id":7,
              "name":"Division B name"
           },
           {
              "id":8,
              "name":"Division C name"
           }
        ]
     },
     {
        "id":3,
        "name":"department B name",
        "divisions":[
           {
              "id":11,
              "name":"Division E name"
           },
           {
              "id":12,
              "name":"Division F name"
           },
           {
              "id":13,
              "name":"Division G name"
           }
        ]
     }
  ]
 }
 }

Из этого Json я хочу выбрать штаб-квартиру или отдел, а затем, если выбран отдел, а не штаб-квартира, использовать выбранный идентификатор для выбора подразделения. Я пытался сделать что-то вроде этого:

      element.id as element.name for element in user.structure.headquarters && user.structure.headquarters.departments

Но это не работает.

Возможно ли это сделать?

Или есть другой способ сделать это?

В JSON всегда есть только одна штаб-квартира.

Answer 1

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

http://plnkr.co/edit/PTWxUHobi7agUlB9fCHv?p=preview

Ваш HTML будет выглядеть примерно так:

<select ng-model="selectedDept" 
        ng-options="dept.id as dept.name for dept in data.headquarters.departments"
        ng-change="getDivisions()"></select>


<select ng-if="selectedDept" 
        ng-model="selectedDivision" 
        ng-options="div.id as div.name for div in selectedDivisions"></select>