AngularJS模板中的if else语句

Question

我想在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.我不知道该怎么办这个条件:

• 在范围内添加功能？
• 在模板中做到这一点？

Answer 1

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>

large-video如果video.large是真的,上面基本上会给div元素添加一个css类.

更新:Angular 1.1.5推出了ngIf directive

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>

Answer 2

在最新版本的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>

Answer 3

三元是最明确的做法.

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

Answer 4

Angular本身不提供if/else功能,但您可以通过包含此模块来获取它:

https://github.com/zachsnow/ng-elif

用它自己的话来说,它只是"一个简单的控制流指令集合:ng-if,ng-else-if和ng-else." 它使用起来简单直观.

例:

<div ng-if="someCondition">
    ...
</div>
<div ng-else-if="someOtherCondition">
    ...
</div>
<div ng-else>
    ...
</div>

Answer 5

您可以video.yt$aspectRatio直接使用属性,方法是将其传递给过滤器,然后将结果绑定到模板中的height属性.

您的过滤器看起来像:

app.filter('videoHeight', function () {
  return function (input) {
    if (input === 'widescreen') {
      return '270px';
    } else {
      return '360px';
    }
  };
});

模板将是:

<video height={{video.yt$aspectRatio | videoHeight}}></video>

Answer 6

在这种情况下,您希望根据对象属性"计算"像素值.

我会在控制器中定义一个计算像素值的函数.

在控制器中:

$scope.GetHeight = function(aspect) {
   if(bla bla bla) return 270;
   return 360;
}

然后在你的模板中你写下:

element height="{{ GetHeight(aspect) }}px "

Answer 7

我同意三元非常干净.似乎它是非常情境化的,虽然我需要显示div或p或table,所以使用表格我不喜欢三元组,原因很明显.调用函数通常是理想的,或者在我的情况下,我这样做:

<div ng-controller="TopNavCtrl">
        <div ng-if="info.host ==='servername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
       <div ng-if="info.host ==='otherservername'">
            <table class="table">
                <tr ng-repeat="(group, status) in user.groups">
                    <th style="width: 250px">{{ group }}</th>
                    <td><input type="checkbox" ng-model="user.groups[group]" /></td>
                </tr>
            </table>
        </div>
</div>