Dropdown depends on other dropdown - angularjs

Question

I'm having data in the form given below

   var servers =   [
           {
               "name": "server1",
               "version":
               [
                   "10.x"
               ]
           },
           {
               "name": "server2",
               "version":
               [
                   "1", "2"
               ]
           }
       ]

I want to have two drop down. First dropdown will display "name". When user selects name from the first dropdown, second dropdown should be populated with corresponding "version".

Non-working jsfiddle link: http://jsfiddle.net/fynVy/174/

this has been done before, it's called cascading select, you can look that up for more details. Below answer should suffice. — SoluableNonagon
– SoluableNonagon, Commented Nov 10, 2014 at 18:33

Brocco · Accepted Answer · 2014-11-10 18:31:48Z

8

You need to tweak your HTML template, so that the first drop down is displaying the server name, and that the options for the 2nd drop down are based upon the versions in the selected drop down (ngModel of the first drop down).

<div ng-controller="MyCntrl">
    <select ng-model="server" ng-options="x.name for x in servers"></select>
    <select ng-model="version" ng-options="val for val in server.version"></select>
</div>

working fiddle here

answered Nov 10, 2014 at 18:31

Brocco

65.4k12 gold badges74 silver badges77 bronze badges

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

3 Comments

SoluableNonagon Over a year ago

Great answer. If this is a cascading select, would you want to disable or hide the other dropdown until the first is selected?

Brocco Over a year ago

Sure can, just have to add ng-show="server" onto the 2nd drop down.

Krishna Over a year ago

This is really a great solution. I'd thought of doing this way. But this approach will lead to change in existing code. Anyway, I'll change the existing code. Thanks for help

Collectives™ on Stack Overflow

Dropdown depends on other dropdown - angularjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related