AngularJS:两个ng-if或一个插值?

时间:2016-09-27 12:21:00

标签: angularjs binding interpolation angular-ng-if

应根据条件显示文字。一种情况,两种实现方式。

第一种方式:

<p ng-if="theType == 'type21'">Alert! Special type...</p>
<p ng-if="theType != 'type21'">Chill...</p>

第二种方式:

<p>{{theType == 'type21' ? 'Alert! Special type...' : 'Chill...'}}</p>

哪一个更好?各种方式的利弊?

2 个答案:

答案 0 :(得分:0)

我认为ng-if - 正如文档所解释的那样:

  

ngIf指令基于{expression}删除或重新创建DOM树的一部分。如果分配给ngIf的表达式求值为false值,则从DOM中删除该元素,否则将元素的克隆重新插入DOM中。

第二个只检查一次条件,但我认为DOM效率更重要。

答案 1 :(得分:0)

对于像这样的简单案例,这只是一个偏好问题。

对于简单的表达式,我会选择第二个。这只是一个简单的表达,并没有表现出任何性能差异。如果您不希望theType更改,您可以使用bindOnce语法来阻止进一步评估 - 提高性能

{{::(theType == 'type21' ? 'Alert! Special type...' : 'Chill...')}}

请参阅fiddle,您可以删除::

对于更复杂的情况,我宁愿将插值移动到控制器并只使用{{textToShow}},我会留下ng-if用于可以删除的指令,或者如果DOM结构必须改变(这里你只是更改<p>内的文本,您不是要添加新的DOM元素)