提问



我想在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指令:



可以使用如下的东西。[39]


<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/ng-hide的那个ng-show条件。因此,在每个页面上,您实际上将呈现两个不同的元素。[40] [41]


4。另一个需要考虑的选择是ng-class指令。



这可以使用如下。[42]


<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,则在DOM中重新插入element。可以如下使用。[43] [44] [45]


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

其它参考1


在最新版本的Angular(从1.1.5开始)中,它们包含了一个名为ngIf的条件指令。它与ngShowngHide的不同之处在于元素不是隐藏的,但根本不包含在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>

其它参考2


三元是最明确的做法。


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

其它参考3


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


https://github.com/zachsnow/ng-elif[46]


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


例:


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

其它参考4


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

其它参考5


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


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


在控制器中:



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


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



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


其它参考6


我同意三元非常干净。虽然我需要显示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>

其它参考7


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


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

其它参考8


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


谢谢和最好的问候,


一月