AngularJS 模板中的 if else 语句

Posted 2023-02-16

【中文标题】AngularJS 模板中的 if else 语句

【英文标题】：if else statement in AngularJS templates

【发布时间】：2013-03-26 11:20:26

【问题描述】：

我想在 AngularJS 模板中做一个条件。我从 Youtube API 获取视频列表。有些视频是 16:9 的比例，有些是 4:3 的比例。

我想做一个这样的条件：

if video.yt$aspectRatio equals widescreen then 
    element's attr 
else
    element's attr 

我正在使用ng-repeat 迭代视频。不知道我该怎么办：

在作用域中添加一个函数？ 在模板中做吗？

【问题讨论】：

我在这里找到了一篇 ng-if 文章。 goo.gl/wQ30uf

【参考方案1】：

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

（如果您使用的是 1.1.5 或更高版本，请跳至下面的更新（#5））

1。三元运算符：

正如@Kirk 在 cmets 中所建议的那样，最简洁的方法是使用三元运算符，如下所示：

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

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

更新：Angular 1.1.5 介绍了ngIf directive

5。 ng-if 指令：

在1.1.5 以上的版本中，您可以使用ng-if 指令。如果提供的表达式返回 false，这将删除该元素，如果表达式返回 true，则将 element 重新插入 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>

【讨论】：

应该是ng-switch on="video" 而不是ng-switch-on="video"

怎么做？ if() else if() else if() else 但在 dom 中只包含一个元素

也是三元<span>isAdded ? 'Added' : 'Add to cart'</span>

请记住，ng-if 不会将封闭的元素添加到 DOM，直到其条件评估为 true，这与 ng-hide 和 ng-show 不同。

为什么不简单地ng-switch="video"？一些问题？还是之前不可用？对我来说它工作得很好

【参考方案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>

【讨论】：

请记住，ng-if 引入了一个隔离范围，因此$parent 在ng-if 的正文中变为$parent.$parent。

【参考方案3】：

三元是最清晰的方法。

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

【讨论】：

何以 or 中的 2 个条件执行此操作？像 A==B || A==C？ 'varIsTrue' : 'varIsFalse'

包起来（A==B || A==C）

喜欢这个答案！如果 div 不满足条件，使用 ng- 指令会产生大量 html 空白。

【参考方案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>

【讨论】：

我不想一遍又一遍地重复div中的代码。

您不必重复任何事情——您可以很容易地做到ng-if="someCondition && someOtherCondition"。也许我误会了？ （我写了那个模块——它应该像 JS 中的 if 和 else 一样工作）。

这是一个绝对的救星。这应该是 Angular 核心的一部分，在模板编码中是不可缺少的。比到处都有三元运算符要干净得多，并且克服了 ng-switch 无法评估表达式的限制。

感谢@NicoWesterdale！另外，我添加了一个更丰富的 ng-switch 版本，您可能会觉得有用：github.com/zachsnow/ng-cases

看起来像 ng-"解释说我五岁"

【参考方案5】：

您可以直接使用您的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>

【讨论】：

当video.yt$aspectRatio 为空或未定义时，您的代码如何？是否可以应用默认值？

【参考方案6】：

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

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

在控制器中：

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

然后在你的模板中写：

element 

【参考方案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>

【参考方案8】：

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

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

【参考方案9】：

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

谢谢和最好的问候，

一月

【讨论】：

看起来更像 Angular 而不是 AngularJS。

@pzaenger，是的，但是这个问题的许多答案对两者都适用，所以我认为有些人，比如我自己，无论如何都会看答案。如果您介意，请告诉我。

好吧。至少您应该在回答中提及这一点。

@pzaenger，谢谢你的提示，我现在提到了。

【参考方案10】：

ng If else 语句

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