AngularJS - select based on another one

Question

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.

what about some js ? where is your code ?

Dan M. CISSOKHO
– Dan M. CISSOKHO

2016-09-28 17:45:25 +00:00
Commented Sep 28, 2016 at 17:45 — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Sep 28, 2016 at 17:45

Sajeetharan · Accepted Answer · 2016-09-29 09:33:12Z

2

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

edited Sep 29, 2016 at 9:33

answered Sep 28, 2016 at 17:58

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ZaitseV Over a year ago

your answer seems perfect.. how to hide the second select if there aren't children?

Sajeetharan Over a year ago

use ng-show and add your conditon, mark as answer if it has helped

ZaitseV Over a year ago

ng-show="selectedRequest.continent.children > 0" doesn't work for me

Sajeetharan Over a year ago

@paolopolix did you check

ZaitseV Over a year ago

if you check the console in your fiddle you'll look to some errors playing with it.. how can I solve them?

Collectives™ on Stack Overflow

AngularJS - select based on another one

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related