©
Dieses Dokument verwendet PHP-Handbuch für chinesische Websites Freigeben
ngIf指令基于{表达式}来移除或重建DOM树的一部分。如果赋给 ngIf的表达式计算结果为假，元素会从DOM移除，其它情况会复制一份元素插入到DOM中。
ngIf 不同于 ngShow 和 ngHide ， ngIf 是在DOM中完全移除或重建元素，而不是通过 display css 属性改变可见。一种常见的情况是，这种差异表现在依靠一个元素在DOM的位置使用CSS选择器时，例如 :first-child 或 :last-child 伪类。
注意，当一个元素使用 ngIf 移除时，它的域会被销毁，并且当它恢复时一个新域会被创建。使用 ngIf 创建的域通过 原型继承继承它的父域。这个的重要含义是，如果在 ngIf 中使用ngModel会绑定到一个父域的javascript原始定义。这种情况下任何修改都会使子域的变化覆盖父域的值。
同时， ngIf使用自己编译状态来重建元素。 这种行为的一个例子是，如果一个元素的class属性在它编译后被直接修改，使用像 jQuery's .addClass() 方法等，并且元素之后被删掉。当ngIf 重建元素，class属性中已添加的类会丢失，因为会使用原始编译状态来重生成元素。
此外， 你可以通过 ngAnimate 模块来执行动画，控制 enter 和 leave 的效果。
<ANY
ng-if="">
...
</ANY>enter - 在ngIf内容改变时发生，并且一个新DOM元素会被创建和加入到ngIf容器中。
leave - 在ngIf内容从DOM移除时发生。
点击这里 了解更多关于涉及动画的步骤。| 参数 | 类型 | 详述 |
|---|---|---|
| ngIf | expression | 如果表达式为假，元素从DOM树移除。如果为真，复制一份已编译过的元素添加到DOM树。 |
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked:<span ng-if="checked" class="animate-if">
I'm removed when the checkbox is unchecked.
</span>.animate-if {
background:white;
border:1px solid black;
padding:10px;}
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;}
.animate-if.ng-enter,.animate-if.ng-leave.ng-leave-active {
opacity:0;}
.animate-if.ng-leave,.animate-if.ng-enter.ng-enter-active {
opacity:1;}