AngularJS Basic ng if Directive Usage

2021-07-07 06:08:32
OfStack

AngularJS ng-if Directive

AngularJS instance

Uncheck and remove content:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">

 Reservation  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 check box is unchecked,  DIV  Element is removed. </p>
<p> When the check box is re-selected, DIV  Element is redisplayed. </p>

</body>
</html>

Definition and usage

The ng-if directives are used to remove the HTML element when the expression is false.

If the result of an if statement is true, the removed element is added and displayed.

The ng-if instruction differs from ng-hide, ng-hide to hide elements, and ng-if to remove elements from DOM.

Grammar

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

All HTML elements support this instruction.

Parameter value

值	描述
expression	如果表达式返回 false 则会移除整个元素，如果为 true，则会添加元素。

The above is the collation of the basic knowledge of AngularJS, which will be supplemented in the future. Thank you for your support.