AngularJS ng-if Directive
Example
Uncheck a checkbox to remove a section:
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>
Try it Yourself »
Definition and Usage
The ng-if directive removes the HTML element if the expression evaluates to false.
If the if statement evaluates to true, a copy of the Element is added in the DOM.
The ng-if directive is different from the ng-hide, which hides the display of the element, where the ng-if directive completely removes the
element from the DOM.
Syntax
<element ng-if="expression"></element>
Supported by all HTML elements.
Parameter Values
| Value | Description |
|---|---|
| expression | An expression that will completely remove the element if it returns false. If it returns true, a copy of the element will be inserted instead. |
