AngularJS模板中的if else语句

  • Z时代
  • 2024-01-10
  • 分类：问答

我想在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.三元运算符：

正如@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`](https://docs.angularjs.org/api/ng/directive/ngShow)指令

或者，您也可以使用，ng-show/ng-hide但是使用它实际上将同时渲染一个大视频和一个小视频元素，然后隐藏一个满足ng-

hide条件的元素，并显示一个满足ng-show条件的元素。因此，在每个页面上，您实际上将呈现两个不同的元素。

4.另一个要考虑的选择是[`ng-

class`](https://docs.angularjs.org/api/ng/directive/ngClass)指令。

可以如下使用。

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

large-video如果video.large属实，以上内容基本上将为div元素添加一个CSS类。

更新：Angular 1.1.5引入了[`ngIf

directive`](https://docs.angularjs.org/api/ng/directive/ngIf)

5. ng-if指令：

在以上版本中，1.1.5您可以使用ng-

if指令。如果提供的表达式返回false，则将删除该元素，如果表达式返回，则将其重新插入elementDOM中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>

以上是 AngularJS模板中的if else语句 的全部内容， 来源链接： utcz.com/qa/420682.html

回到顶部