AngularJS ng-ifDirective

AngularJS 参考手册AngularJS Reference Manual

AngularJS Example

Uncheck to remove the content:

Keep the 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

ng-ifThe ng-if directive is used to remove an HTML element when the expression is false.

If the if statement evaluates to true, the removed element is added back and displayed.

ng-ifThe ng-if directive is different from ng-hide; ng-hide hides the element, whileng-ifng-if removes the element from the DOM.

Syntax

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

All HTML elements support this directive.

Parameter Value

Value Description
expression If the expression returns false, the entire element is removed; if it returns true, the element is added.

AngularJS 参考手册AngularJS Reference Manual

Other Extensions