如果AngularJS模板else语句 [英] if else statement in AngularJS templates

问题描述

我想在一个AngularJS模板做的条件。我获取来自YouTube API的视频列表。一些影片是16：9的比例，有些是4：3的比例

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio.

我想打一个条件是这样的：

I want to make a condition like this:

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

我用 NG-重复迭代的影片。不知道我应该为此做条件：

I'm iterating the videos using ng-repeat. Have no idea what should I do for this condition:

• 在范围内添加一个功能？


• 请它的模板？

推荐答案

Angularjs（以下1.1.5版本），不提供的if / else 功能。以下是要考虑的几个选项，你想达到什么：

Angularjs (versions below 1.1.5) does not provide the if/else functionality . Following are a few options to consider for what you want to achieve:

（ 跳转到下面的更新（＃4）如果你正在使用1.1​​.5版或更高版本的）

(Jump to the update below (#4) if you are using version 1.1.5 or greater)

可以使用像下面这样。

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

2。 NG-隐藏 /的 NG-节目 指令

另外，您还可以使用 NG-显示/ NG隐藏，但使用这实际上将使这两个大的视频和一个小的视频元素，然后隐藏一个符合 NG-隐藏的条件，并显示符合 NG-节目条件之一。因此，在每一页上，你会实际呈现两个不同的元素。

2. ng-hide / ng-show directives

Alternatively, you might also use ng-show/ng-hide but using this will actually render both a large video and a small video element and then hide the one that meets the ng-hide condition and shows the one that meets ng-show condition. So on each page you'll actually be rendering two different elements.

这可以如下使用。

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

以上基本上都会添加大视频 css类的div元素，如果 video.large 是truthy

The above basically will add a large-video css class to the div element if video.large is truthy.

在上述版本 1.1.5 您可以使用 NG-如果指令。如果EX pression提供的回报这将消除元素假并重新插入元素中的DOM如果EX pression返回真正。可以如下使用。

In the versions above 1.1.5 you can use the ng-if directive. This would remove the element if the expression provided returns false and re-inserts the element in the DOM if the expression returns true. Can be used as follows.

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

这篇关于如果AngularJS模板else语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！