我想在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迭代视频。对于这种情况,我不知道该怎么做:

在作用域中添加函数? 它在模板?


当前回答

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

你可以像上面一样使用ng-if指令。

其他回答

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

你可以像上面一样使用ng-if指令。

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

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

在控制器中:


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

然后在模板中写:


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

我同意三元是非常干净的。似乎这是非常情境的,虽然作为一些我需要显示div或p或表,所以对于一个表,我不喜欢三元的原因很明显。调用一个函数通常是理想的,在我的情况下,我这样做:

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

你可以用你的视频。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>

ng If else语句

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