分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了if语句 – 如果else语句在AngularJS模板中，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我想在AngularJS模板中做一个条件。我从YouTube API获取视频列表。某些视频的比例为16：9，有些视频的比例为4：3。 @H_301_1@我想做一个这样的条件：

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

@H_301_1@我使用Ng-repeat迭代视频。不知道我该怎么做这个条件：

@H_301_1@>在范围中添加函数？
>在模板中做吗？

Angularjs(版本低于1.1.5)不提供if / else功能。以下是您想要实现的几个选项： @H_301_1@(如果您使用的是1.1.5或更高版本，请跳至下面的更新(#5)

@H_301_1@三元运算符：

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

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

@H_301_1@ng-switch指令：

@H_301_1@可以使用像下面这样的东西。

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

@H_301_1@ng-hide/ng-show指令

@H_301_1@或者，您也可以使用Ng-show / ng-hide，但使用它将实际渲染大视频和小视频元素，然后隐藏符合ng-hide条件的视频元素，并显示符合ng-show条件的视图。所以在每个页面上，你实际上将渲染两个不同的元素。

@H_301_1@4.另一个需要考虑的选择是ng-class指令。

@H_301_1@这可以如下使用。

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

@H_301_1@如果video.large是真实的，上面基本上会添加一个大视频CSS类到div元素。

@H_301_1@更新：Angular 1.1.5介绍了ngIf directive

@H_301_1@ng-if指令：

@H_301_1@在1.1.5以上的版本中，您可以使用Ng-if指令。如果提供的表达式返回false，这将删除元素，如果表达式返回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>