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:
http://plnkr.co/edit/ia3hqKojbZZH6dAJ0ZFz
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:
Sports
- soccer
Adademics
- 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.
Events
- Prom
- Homecoming
- Graduation
- Spirituality
Any ideas?
source to share
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-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 an example of a workbox (I used the data provided in the plunk): http://plnkr.co/S5RCMv
source to share