paolopolix paolopolix - 2 months ago 7
JSON Question

AngularJS - select based on another one

I've this JSON:

{
"world": [{
"name": {
"en": "America"
},
"type": "continent",
"children": [{
"type": "state",
"name": {
"en": "Florida"
}
}, {
"type": "state",
"name": {
"en": "Hawaii"
}
}]
}, {
"name": {
"en": "Europe"
},
"type": "continent",
"children": [

]
}]
}


I need to do two select. The first contain the selection of type "continent", the other one based on the first must be showed if the first one children's are > 0 and contain the selection of the states.

Answer

You can do this,

 <select name="client" ng-model="selectedRequest.continent" ng-options="c.name.en for c in clients.world" required></select>
 <select id="department" ng-model="selectedRequest.state" ng-options="d.name.en for d in  selectedRequest.continent.children"></select>

DEMO

EDIT

Updated fiddle disabling select if children is empty

Comments