if-statement - AngularJS 模板中的 if else 语句

Question

我想在 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 迭代视频.不知道我该怎么办这种情况:

在作用域中添加函数？

在模板中做吗？

Answer 1

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">
        <!-- code to render a large video block-->
    </div>
    <div ng-switch-default>
        <!-- code to render the regular video block -->
    </div>
</div>

3. ng-hide / ng-show 指令

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

4. 另一个需要考虑的选项是 ng-class 指示。

这可以如下使用。

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

上面基本上都会加一个 large-video如果 video.large，将 css 类添加到 div 元素是真实的。

更新: Angular 1.1.5介绍了 ngIf directive

5. ng-if 指示:

在以上版本 1.1.5您可以使用 ng-if指示。如果提供的表达式返回 false，这将删除该元素并重新插入 element如果表达式返回 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>