AngularJS ng-if Directive
AngularJS Example
Deselect and remove content:
Keep HTML: <input type="checkbox" ng-model="myVar"
ng-init="myVar = true"><div
ng-if="myVar">
<h1>Welcome</h1><p>Welcome to my home.</p>
<hr></div>
Definition and Usage
The ng-if directive removes the HTML element if the expression evaluates to false.
If the if statement results in true, the element is added back and displayed.
The ng-if directive is different from ng-hide, which hides the element, while ng-if removes the element from the DOM.
Syntax
The directive is supported by all HTML elements.
Parameter Values
| Value | Description |
|---|---|
| expression | If the expression returns false, the entire element is removed; if true, the element is added. |