提问者:小点点

AngularJS模板中的if else语句


我想在AngularJS模板中做一个条件。我从Youtube API获取一个视频列表。视频有的比例为16:9,有的比例为4:3。

我想提出这样一个条件:

if video.yt$aspectRatio equals widescreen then 
    element's attr height="270px"
else
    element's attr height="360px"

我正在使用ng-repeat迭代视频。我不知道该怎么处理这种情况:

  • 是否在作用域中添加函数?
  • 是否在模板中执行?

共2个答案

匿名用户

Angularjs(1.1.5以下版本)不提供if/else功能。以下是您想要实现的目标的几个选项:

(如果您使用的是版本1.1.5或更高版本,请跳转到下面的更新(#5)。)

正如@kirk在评论中所建议的,最干净的方法是使用三元运算符,如下所示:

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

可以使用类似下面的东西。

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

或者,您也可以使用ng-show/ng-hide,但使用它实际上会同时呈现一个大视频和一个小视频元素,然后隐藏满足ng-hide条件的视频元素,并显示满足ng-show条件的视频元素。因此在每一页上,您实际上将呈现两个不同的元素。

这可以按如下方式使用。

<div ng-class="{large-video: video.large}">
    <!-- video block goes here -->
</div>

如果video.large是truthy,那么上面的内容基本上将为div元素添加一个large-videocss类。

1.1.5以上版本中,可以使用ng-if指令。如果所提供的表达式返回false,这将删除该元素,如果表达式返回true,则在DOM中重新插入元素。可按如下方式使用。

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

匿名用户

在Angular的最新版本(从1.1.5开始)中,它们包含了一个名为ngif的条件指令。它与ngshownghide的不同之处在于,元素没有隐藏,而是完全不包含在DOM中。它们对于创建成本很高但不使用的组件非常有用:

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