---

Search posts under AngularJS:

---

If in AngularJS

How to show / hide an element based on if conditon in AngularJS?

If we have a requirement to show / hide an element based on expression value is true / false, we can use ng-if directive.

In below code snippet, check box has ng-model "agree" that is being used in ng-if directive. If the check box is checked, the "agree" model value returns true that shows the 1^st div and hides the 2^nd div and vice-versa.

<div ng-app>

    <label><input type="checkbox" ng-model="agree" /> I agree </label>
    <div ng-if="agree" style="color:green;background-color:yellow">Thanks for agreeing !</div>
    <div ng-if="!agree" style="color:yellow;background-color:green">Please click on I agree checkbox.</div>

</div>

Output