AngularJS 中文手册
目录搜索
提交中...

©
本文档使用 php.cn手册 发布

文字
分享

AngularJS: API: ng/directive/ngIf

ngIf

  1. - directive in module ng

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 的效果。

指令信息

  • 这个指令会创建新的作用域(scope)。
  • 这个指令执行优先级为600.

用法

  • 作为属性使用:

    1

    2

    3

    4

    <code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:navy;"><ANY</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

      </span><span style="box-sizing:border-box;color:teal;">ng-if</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">""</span><span style="box-sizing:border-box;color:navy;">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

    ...

    </span><span style="box-sizing:border-box;color:navy;"></ANY></span></code>

动画

enter - 在ngIf内容改变时发生，并且一个新DOM元素会被创建和加入到ngIf容器中。

leave - 在ngIf内容从DOM移除时发生。

点击这里 了解更多关于涉及动画的步骤。

参数

参数 类型 详述
ngIf expression

如果表达式为假，元素从DOM树移除。如果为真，复制一份已编译过的元素添加到DOM树。

示例

index.html

1

2

3

4

<code style="box-sizing:border-box;font-family:Menlo, Monaco, Consolas, &apos;Courier New&apos;, monospace;font-size:inherit;padding:0px;color:inherit;background-color:transparent;white-space:pre-wrap;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;"><span style="box-sizing:border-box;color:rgb(68, 85, 136);">Click</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> me</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"><</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">input type</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"checkbox"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> ng</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">-</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">model</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"checked"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> ng</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">-</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">init</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"checked=true"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">/><</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">br</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">/>

</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:rgb(68, 85, 136);">Show</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">when</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">checked</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">:</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"><</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">span ng</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">-</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">if</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"checked"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);"> </span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">class</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">=</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">"animate-if"</span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">></span><span style="box-sizing:border-box;color:rgb(51, 51, 51);">

  I</span><span style="box-sizing:border-box;color:rgb(221, 17, 68);">'m removed when the checkbox is unchecked.

</span></span></code>

animations.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<code style="box-sizing: border-box; font-size: inherit; padding: 0px; color: inherit; background-color: transparent; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">animate</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">if</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  background</span><span style="box-sizing: border-box;">:</span><span style="box-sizing: border-box;">white</span><span style="box-sizing: border-box;">;</span><span style="box-sizing: border-box;">

  border</span><span style="box-sizing: border-box;">:</span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">1px</span><span style="box-sizing: border-box;"> solid black</span><span style="box-sizing: border-box;">;</span><span style="box-sizing: border-box;">

  padding</span><span style="box-sizing: border-box;">:</span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">10px</span><span style="box-sizing: border-box;">;</span><span style="box-sizing: border-box;">}</span><span style="box-sizing: border-box;">

 

</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">animate</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">if</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">enter</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">animate</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">if</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">leave </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  </span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">webkit</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">transition</span><span style="box-sizing: border-box;">:</span><span style="box-sizing: border-box;">all cubic</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">bezier</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.250</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.460</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.450</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.940</span><span style="box-sizing: border-box;">)</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.5s</span><span style="box-sizing: border-box;">;</span><span style="box-sizing: border-box;">

  transition</span><span style="box-sizing: border-box;">:</span><span style="box-sizing: border-box;">all cubic</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">bezier</span><span style="box-sizing: border-box;">(</span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.250</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.460</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.450</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.940</span><span style="box-sizing: border-box;">)</span><span style="box-sizing: border-box;"> </span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0.5s</span><span style="box-sizing: border-box;">;</span><span style="box-sizing: border-box;">}</span><span style="box-sizing: border-box;">

 

</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">animate</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">if</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">enter</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">animate</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">if</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">leave</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">leave</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">active </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  opacity</span><span style="box-sizing: border-box;">:</span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">0</span><span style="box-sizing: border-box;">;</span><span style="box-sizing: border-box;">}</span><span style="box-sizing: border-box;">

 

</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">animate</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">if</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">leave</span><span style="box-sizing: border-box;">,</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">animate</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">if</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">enter</span><span style="box-sizing: border-box;">.</span><span style="box-sizing: border-box;">ng</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">enter</span><span style="box-sizing: border-box;">-</span><span style="box-sizing: border-box;">active </span><span style="box-sizing: border-box;">{</span><span style="box-sizing: border-box;">

  opacity</span><span style="box-sizing: border-box;">:</span><span style="box-sizing: border-box; color: rgb(68, 85, 136);">1</span><span style="box-sizing: border-box;">;</span><span style="box-sizing: border-box;">}</span></code>

上一篇：ng/directive/ngHref下一篇：ng/directive/ngInclude