问题

我想在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 迭代视频.不知道我该如何处理这种情况:

  • Add a function in the scope?
  • Do it in template?


解决方法

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

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

1. Ternary operator:

如@Kirk在注释中建议,最简单的方法是使用三元运算符,如下所示:

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

2. ng-switch directive:

可以使用类似以下内容.

<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 directives

或者,您也可以使用 ng-show / ng-hide ,但使用此选项会显示大型影片和小型影片元素,然后隐藏符合 ng -hide 条件,并显示符合 ng-show 条件的条件.因此,在每个页面上,您实际上将呈现两个不同的元素.

4. Another option to consider is ng-class directive.

这可以使用如下.

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

如果 video.large 是真实的,上述基本上会在div元素中添加 large-video css类.

UPDATE: Angular 1.1.5 introduced the ngIf directive

5. ng-if directive:

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>



相关问题推荐