ngIf和ngSwitch AngularJS

Question

ngIf和ngSwitch之间有什么实际区别？这两个指令都操纵DOM，但ngSwitch更加冗长。典型的情况是使用ngIf，除非你需要一些非常大的东西，在哪种情况下使用ngSwitch？

是否存在ngSwitch和ngIf不是直接替换的情况？或者他们唯一的实际区别在于语法？

Answer 1

ngIf基本上是ngSwitch的一个版本，只有一个条件。它与ngShow的不同之处在于它删除了实际的DOM元素而不是简单地隐藏它。如果您使用ngSwitch只进行单独的条件检查，那么我相信ngIf会做同样的事情。

Answer 2

我相信

Michele Tilley's got it exactly right，特别是指出与ngShow / ngHide的对比。还需要注意一个额外的区别：ng-If将分离并重新附加元素就地。但ng-Switch有一个外部包含元素，您可以在其上声明主指令及其条件：ng-switch="expression"。该外部元素中的条件内容将append() - 作为外部元素的最后一个子，从而相对于外部元素中的任何非条件内容更改其位置。

并且，请参阅this CodePen以获取所有三个的交互式演示，显示执行中的差异。

---

编辑：Angular 1.2中此行为已更改。元素现在留在原地。上面的Codepen提到并演示了这一点，提供了一个1.08 Plunk的链接，遗憾地被消灭了......

Answer 3

另外一个区别是ngIf和ngSwitch会创建新范围，而ngShow / ngHide则不会。

Answer 4

您可以在ngIf / ngSwitch中考虑与编码时if / switch相同的方式。显然他们几乎做了同样的事情，但有些情况下ngIf更好，有些情况下nfSwitch更好。