Creating dynamic parent child folders from JSON feed using Angularjs

I am trying to create a parent child style for a selector like this example scripts here Check it out! ...

The problem I am facing is my JSON not returning the pair ID in the child like in this example. For reference, here's my JSON below:

As you can see, there is a main link that starts out as a main parent. There you get starter categories. Most likely, it will be something like this:

    - soccer
    - math


Other categories can also have child children, but I really only need the first two levels of the hierarchy, and after that I could list the child units as just padding at the second level. My pain is how I link the parent to the unreferenced child in the parent's child. For example, in my JSON from plunkr, I would like to take the parent events, and after it is selected, fill the second snapshot with Great Destiny, Return Home, Prom, and Spirituality.

    - Prom
    - Homecoming
    - Graduation
    - Spirituality


Any ideas?


source to share

1 answer

The easiest way to solve this is to use the whole object as ng-model

instead of using id

. This is an example of the markup:

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

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

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


Here is an example of a workbox (I used the data provided in the plunk):



All Articles