AngularJS Reference Manual AngularJS Select (Selection Box)

AngularJS ng-if directive

Example

!DOCTYPE　html
<html>
<head>
<meta　charset="utf-8">
<script　src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body　ng-app="">
Preserve 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>
<p>When the checkbox is unchecked, the DIV element will be removed.</p>
<p>When the checkbox is reselected, the DIV element will be displayed again.</p>
</body>
</html>

Test and see ‹/›

Definition and Usage

ng-if directive is used to remove HTML elements when the expression is false.

If the result of the if statement is true, the element will be added or removed and displayed.

ng-if directives are different from ng-hide, ng-hide hides the element, while ng-if is to remove 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 will be removed, and if it returns true, the element will be added.

AngularJS Reference Manual

AngularJS Reference Manual AngularJS Select (Selection Box)

AngularJS Basic Tutorial

AngularJS ng-if directive

Definition and Usage

Syntax

Parameter Value