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="">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 is removed when the check box is unchecked. </p><p>When the check box is re-selected, the DIV element will be re-displayed. </p></body></html>
Definition and usage
The ng-if directive is used to remove HTML elements when the expression is false.
If the result of the execution of the if statement is true, the removed element will be added and displayed.
The ng-if directive is different from ng-hide, where ng-hide hides elements, while ng-if removes elements from the DOM.
grammar
<element ng-if="expression"></element>
All HTML elements support this directive.
Parameter value
| value | describe |
|---|---|
| Expression | If the expression returns false, the entire element will be removed, and if true, the element will be added. |
The above is a compilation of the basic knowledge of AngularJS. We will continue to add it later. Thank you for your support.