AngularJS ng-if 指令

实例

取消选中复选框以移除 div:

<!DOCTYPE html>
<html>
<script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
<body ng-app="">
保留 HTML: <input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h2>Welcome</h2>
<p>Welcome to my home.</p>
<hr>
</div>
<p>未选中复选框时，DIV元素将被移除。</p>
<p>如果选中复选框，DIV元素将返回。</p>
</body>
</html>

运行一下

定义与用法

ng-if 如果表达式的计算结果为 false，指令将删除 HTML 元素。

如果 If 语句的计算结果为 true，则会在 DOM 中添加元素的副本。ng-if 指令不同于 ng-hide，后者隐藏元素的显示，其中 ng-if 指令从 DOM 中完全删除元素。

语法

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

由所有 HTML 元素支持。

参数值

值	描述
expression	一个表达式，如果返回 false，它将完全删除该元素。如果返回 true，将插入该元素的副本。

AngularJS ng-if 指令

实例

定义与用法

语法

参数值

分类导航