AngularJS 模板中的 if else 语句

Angularjs（低于 1.1.5 的版本）不提供 功能。以下是要考虑实现的目标的几个选项：if/else

(如果您使用的是 1.1.5 或更高版本，请跳转到下面的更新 （#2）)

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

4. 另一个可以考虑的选择是 ng-class 指令。

这可以按如下方式使用。

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

上面基本上会在 div 元素中添加一个 css 类，如果是真的。large-videovideo.large

更新：Angular 1.1.5 引入了 ngIf 指令

5. NG-IF指令：

在上述版本中，您可以使用该指令。如果提供的表达式返回，这将删除该元素，如果表达式返回，则在 DOM 中重新插入 。可以按如下方式使用。1.1.5ng-iffalseelementtrue

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

您可以通过将属性传递到筛选器，并将结果绑定到模板中的 height 属性来直接使用属性。video.yt$aspectRatio

您的过滤器将如下所示：

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

模板将是：

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

在最新版本的 Angular 中（从 1.1.5 开始），它们包含一个名为 .它与元素不同，元素没有被隐藏，但根本不包含在 DOM 中。它们对于创建成本高但未使用的组件非常有用：ngIfngShowngHide

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

In this case you want to "calculate" a pixel value depending of an object property.

I would define a function in the controller that calculates the pixel values.

In the controller:

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

Then in your template you just write:

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

Ternary is the most clear way of doing this.

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

Angular itself doesn't provide if/else functionality, but you can get it by including this module:

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

In its own words, it's just "a simple collection of control flow directives: ng-if, ng-else-if, and ng-else." It's easy and intuitive to use.

Example:

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

I agree that a ternary is extremely clean. Seems that it is very situational though as somethings I need to display div or p or table , so with a table I don't prefer a ternary for obvious reasons. Making a call to a function is typically ideal or in my case I did this:

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

you can use the ng-if directive as above.

A possibility for Angular: I had to include an if - statement in the html part, I had to check if all variables of an URL that I produce are defined. I did it the following way and it seems to be a flexible approach. I hope it will be helpful for somebody.

The html part in the template:

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

And the typescript part:

  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';
      }
  }

Thanks and best regards,

Jan

ng If else statement

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