Search code examples
javascripthtmlangularjsangular-ngmodel

Angular: Show div content depending on 2 stage drop down menu

I would like a construct as follows for a webpage: There should be 2 drop-down menus where the second drop-down menu depends on the first drop-down menu (see below). In addition, there should be a div section that shows some content dependent on the input on both drop-down menus.

For example:

Drop-down menu 1: Options available are "A" and "B"

Drop-down menu 2: Options available are

  • If "A" was chosen in drop-down menu 1, then options available are "DC" and "NY"
  • If "B" was chosen in drop-down menu 1, then options available are "B_DC" and "B_NY"

Now, dependent on the input in the drop down menus, there should be some sort of output (that depends on the input) displayed in the div section. For example, if "B" and "B_NY" was chosen, the div section may contain the message "Options "B" and "B_NY" chosen". Or, if for example "A" and "DC" was chosen, the div section may contain a button instead (I have chosen this example just to highlight that the content is not just a text in general in case this matters).

Note: There is a very similar example already on stackoverflow:

http://stackoverflow.com/questions/26389562/angular-show-div-content-depending-on-which-option-chosen-from-drop-down-menu/26389852#26389852

This question is identical to my question above (I have also chosen the example accordingly) - the only difference is that there is just one drop down menu instead of two. A solution presented in that thread can also be found on Plunker: 

http://plnkr.co/edit/ziaxHOj53J6sePf6y6Qf?p=preview

I hope that this other question makes it much easier for everyone who wants to help me out with my quesiton.

Thank you in advance!

Solution

  • Take this example:

    <select class="form-control" ng-model="places1">
  <option>Choose Place</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>
<select class="form-control" ng-model="places2">
  <option>Choose Place</option>
  <option value="DC" ng-if="places1 == 'A'">DC</option>
  <option value="NY" ng-if="places1 == 'A'">NY</option>
  <option value="B_DC" ng-if="places1 == 'B'">B_DC</option>
  <option value="B_NY" ng-if="places1 == 'B'">B_NY</option>
</select>

<div ng-if="places1 == 'A' && places2 == 'DC'">A => DC</div>
<div ng-if="places1 == 'A' && places2 == 'NY'">A => NY</div>
<div ng-if="places1 == 'B' && places2 == 'B_DC'">B => B_DC</div>
<div ng-if="places1 == 'B' && places2 == 'B_NY'">B => B_NY</div>

    Working example: http://plnkr.co/edit/dx3A2GuymtswwEdJHotW?p=preview