AngularJS模板中的if else语句

我想在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.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>

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

三元是最清晰的方法。

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

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>

您可以通过将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>

在这种情况下，您要根据对象属性“计算”像素值。

我将在控制器中定义一个函数来计算像素值。

在控制器中：

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

然后在模板中，您只需编写：

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

我同意三元是非常干净的。似乎这是非常情况，尽管我需要显示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>

    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

您可以使用上面的ng-if指令。

Angular的可能性：我必须在html部分中包含if-语句，我必须检查是否定义了我生成的URL的所有变量。我按照以下方式进行操作，这似乎是一种灵活的方法。我希望这会对某人有所帮助。

模板中的html部分：

    <div  *ngFor="let p of poemsInGrid; let i = index" >
        <a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
    </div>

和打字稿部分：

  produceFassungsLink(titel: string, iri: string) {
      if(titel !== undefined && iri !== undefined) {
         return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
      } else {
         return 'Linkinformation has not arrived yet';
      }
  }

谢谢和最诚挚的问候，

一月

ng if else陈述

ng-if="receiptData.cart == undefined ? close(): '' ;"