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:
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
source to share
The easiest way to solve this is to use the whole object as
instead of using
. 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