Home>

angularjs ng-if directive

angularjs example

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="">
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>
<p>The div element will be removed when the checkbox is unchecked.
</p>
<p>When the checkbox is rechecked,The div element is redisplayed.
</p>
</body>
</html>

Definition and usage

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

If the if statement evaluates to true, elements are added and removed,And displayed.

The ng-if directive is different from ng-hide, ng-hide hides elements,Ng-if removes elements from the dom.

grammar

<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 true, elements are added.

  • Previous The difference between final, finally and finalize in java
  • Next Analysis of the difference between == and equals () in C #