Creating Dynamic Parent Child drop downs from a JSON feed with Angularjs

Question

I'm trying to create a parent child drop down style of selector similar to this fiddle example here Check it out!.

The issue that I'm having is my JSON doesn't return a paraent ID within the child like in this example used. For reference here is my JSON below:

http://plnkr.co/edit/ia3hqKojbZZH6dAJ0ZFz

As you can see, there is a main link that starts as the main parent. With in there you get the starting categories. More then likely this would be something like:

Sports
    - soccer
Adademics
    - math

The other categories could have sub children as well, but I really only need the first two levels of the hierachy and after that point I could list the sub children as as simply indents in the second level. My pain point is how I connect the parent with the child without a reference in the child to the parent. For example in my JSON from the plunkr I would like to take the parent Events and after it is selected populate the second drop down with Granduation, Homecoming, Prom, and Spirituality.

Events
    - Prom
    - Homecoming
    - Graduation
    - Spirituality

Any ideas?

Answer 1

The easiest way to solve this is by using the whole object as ng-model instead of using the id. This is an example markup:

  <select ng-model="selectedParent" 
          ng-change="selectedChild=null"
          ng-options="p as p.name for p in items">
      <option value="">-- Choose Parent --</option>
  </select>

  <select ng-model="selectedChild" ng-disabled="!selectedParent" 
          ng-change="selectedGrandchild=null"
          ng-options="c as c.name for c in selectedParent.children">
    <option value="">-- Choose Child --</option>
  </select>

  <select ng-model="selectedGrandchild" ng-disabled="!selectedChild" 
          ng-options="gc as gc.name for gc in selectedChild.children">
    <option value="">-- Choose Grandchild --</option>
  </select>

Here is a working plunk as an example (I used the data provided in the plunk): http://plnkr.co/S5RCMv