Using ng-hide based on previous element in Angular

Question

How do I use ng-hide based on the previous select dropdown? I would like to show #additional-option if option C is selected in the dropdown.

<div class="form-group">
    <label class="control-label col-md-3">Option:
        <span class="required">
            *
        </span>
    </label>
    <div class="col-md-4">
        <select class="form-control">
            <option selected>A</option>
            <option>B</option>
            <option>C</option>
            <option>D</option>
        </select>
    </div>
</div>  

<!-- Show the below only if C is selected -->
<div class="form-group" id="additional-option">
    <label class="control-label col-md-3"></label>
    <div class="col-md-4">
        <label>
            <div class="checker">
                <span>
                    <input type="checkbox">
                </span>
            </div>
            Additional option
        </label>
    </div>
</div>

harun · Accepted Answer · 2014-05-27 10:13:34Z

3

You bind the view controls to scope items and check the values in other bindings. So in your case you can bind your first select to scope as below.

ng-model="formData.selectedLetter"

Then you can use ng-show in the next control to check the value for the previous select control.

ng-show="formData.selectedLetter === 'C'"

You could also use ng-hide if you must, by reversing the condition expression.

This will ensure that the second control is only visible if the formData.selectedLetter is 'C'.

edited May 27, 2014 at 10:13

answered May 27, 2014 at 9:52

harun

1,91919 silver badges19 bronze badges

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

2 Comments

chuckfinley Over a year ago

It works but for some reason the select defaults to some empty option which is not even in the list. How do I fix this?

gkalpak Over a year ago

You need to initialize the model. The "how" depends on the way you defined the options (there are several alternatives). I suggest you take a look at the select directive in Angular's docs. See, also, this short demo.

Abhinav Gujjar · Accepted Answer · 2014-05-27 10:05:55Z

0

You simply need to setup a two-way binding on your element like so

<select class="form-control" ng-model="selectedOption">

and use that value in the ng-show directive for the div that needs to be hidden, like so

<div ng-show="selectedOption === 'C'" class="form-group" id="additional-option">

here's the plunker - http://plnkr.co/edit/XsXs4uhNTB6cKAL4IM5f?p=preview

answered May 27, 2014 at 10:05

Abhinav Gujjar

2,6402 gold badges26 silver badges35 bronze badges

Collectives™ on Stack Overflow

Using ng-hide based on previous element in Angular

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related