41

What's practical difference between ngIf and ngSwitch? Both directives manipulate the DOM, but ngSwitch is more verbose. Is the typical case to just use ngIf unless you need something really big in which case use ngSwitch?

Is there a situation where ngSwitch and ngIf are not direct replacements? Or is their only practical difference the syntax?

4

4 回答 4

40

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

于 2013-05-24T19:45:10.243 回答
22

我相信Michele Tilley 完全正确，尤其是在指出与ngShow/的对比方面ngHide。还有一个需要注意的额外区别：将就地ng-If分离和重新附加元素。但是有一个外部包含元素，您可以在该元素上声明主指令及其条件：. 该外部元素中的条件内容将被-ed 作为外部元素的最后一个子元素，从而改变其相对于外部元素中任何非条件内容的位置。ng-Switchng-switch="expression"append()

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

编辑：这种行为在 Angular 1.2 中发生了变化。元素现在保留在原处。上面的 Codepen 提到并演示了这一点，提供了一个 1.08 Plunk 的链接，该 Plunk 不幸被清除了......

于 2013-11-02T23:35:24.577 回答
7

另一个区别是 ngIf 和 ngSwitch 创建新的范围，而 ngShow/ngHide 没有。

于 2015-04-02T23:29:57.423 回答
1

您可以像在编码时使用 if/switch 一样在 ngIf/ngSwitch 中进行思考。显然他们做的事情几乎相同，但有些情况下 ngIf 更好，有些情况下 nfSwitch 更好。

于 2016-02-15T11:04:51.470 回答