首页 文章

AngularJS模板中的if else语句

提问于
浏览 次
654

我想在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 迭代视频 . 我不知道该怎么办这个条件：

  • 在范围内添加功能？

  • 在模板中做到了吗？

if-statement angularjs

9 回答

  • 133

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

    （ Jump to the update below (#5) if you are using version 1.1.5 or greater ）

    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>

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

    更新：Angular 1.1.5引入了ngIf指令

    5. ng-if指令：

    在 1.1.5 上面的版本中，您可以使用 ng-if 指令 . 如果提供的表达式返回 false ，则会删除元素，如果表达式返回 true ，则会在DOM中重新插入 element . 可以如下使用 .

    <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>
    回复于
  • 26

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

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

    在控制器中：

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

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

    element height="{{ GetHeight(aspect) }}px "
    回复于
  • 1215

    在最新版本的Angular（从1.1.5开始）中，它们包含了一个名为 ngIf 的条件指令 . 它与 ngShow 和 ngHide 的不同之处在于元素不是't hidden, but not included in the DOM at all. They are very useful for components which are costly to create but aren' t：

    <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>
    回复于
  • 167

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

    谢谢和最好的问候，

    一月

    回复于
  • 10

    三元是最明确的做法 .

    <div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
    回复于
  • 3

    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>
    回复于
  • 1

    您可以直接使用 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>
    回复于
  • 8

    我同意三元非常干净 . 似乎它是非常情境化的，虽然我需要显示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>
    回复于
  • 41
    <div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>

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

    回复于

相关问题