AngularJS ng-if Directive

AngularJS Reference Manual

Definition and Usage

If the evaluation result of the expression is false,ng-if The directive will delete the HTML element.

If the evaluation result of the if statement is true, a copy of the element will be added to the DOM.

ng-if directive and ng-hide differentng-hide Hides the display of the element, where ng-if The directive removes the element completely from the DOM.

Example

Uncheck the checkbox to delete part:

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

Syntax

<element ng-if="expression</element>

All HTML elements support.

Parameters

Parameters Description
expression

If it returns false, the expression will completely delete the element.

If it returns true, a copy of the element will be inserted.

AngularJS Reference Manual