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?
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.