AngularJS模板中的if else语句

AngularJS模板中的if else语句

Angularjs（低于1.1.5版）不提供此

if/else

功能。以下是您要达到的目标的几种选择：

（ 如果您使用的是1.1.5或更高版本，请跳至下面的更新（＃5） ）

1.三元运算符：

正如@Kirk在评论中所建议的那样，最干净的方法是使用三元运算符，如下所示：

<span>{{isLarge ? 'video.large' : 'video.small'}}</span>

2.

ng-switch

指令：

可以像下面这样使用。

<div ng-switch on="video">    <div ng-switch-when="video.large">        <!-- pre to render a large video block-->    </div>    <div ng-switch-default>        <!-- pre to render the regular video block -->    </div></div>

3.

ng-hide

/ [`ng-

show`](https://docs.angularjs.org/api/ng/directive/ngShow)指令

或者，您也可以使用，

ng-show/ng-hide

但是使用它实际上将同时渲染一个大视频和一个小视频元素，然后隐藏一个满足

ng-hide

条件的元素，并显示一个满足

ng-show

条件的元素。因此，在每个页面上，您实际上将呈现两个不同的元素。

4.另一个要考虑的选择是[`ng-

class`](https://docs.angularjs.org/api/ng/directive/ngClass)指令。

可以如下使用。

<div ng->    <!-- video block goes here --></div>

large-video

如果

video.large

属实，以上内容基本上将为div元素添加一个CSS类。

更新：Angular 1.1.5引入了[`ngIf

directive`](https://docs.angularjs.org/api/ng/directive/ngIf)

5.

ng-if

指令：

在以上版本中，

1.1.5

您可以使用

ng-if

指令。如果提供的表达式返回

false

，则将删除该元素，如果表达式返回，则将其重新插入

element

DOM中

true

。可以如下使用。

<div ng-if="video == video.large">    <!-- pre to render a large video block--></div><div ng-if="video != video.large">    <!-- pre to render the regular video block --></div>