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 1st div and hides the 2nd 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
Views: 7857 | Post Order: 45