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>  

Answer 1

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'.

Answer 2

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