协慌网

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

• 在范围内添加功能？
• 是否在模板中？

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>

video.large是正确的，则以上内容基本上将在 div 元素中large-video

更新： Angular 1.1.5引入了ngIf directive

5. ng-if指令：

1.1.5以上的版本中，可以使用ng-if指令。如果表达式提供返回此将消除元件false并重新插入的element在 DOM 如果表达式返回true 。可以如下使用。

<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的条件指令。 ngShow和ngHide不同之处在于元素没有被隐藏，但根本没有包含在 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>

三元是最清晰的方法。

<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>