我想在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迭代视频。对于这种情况，我不知道该怎么做:
在作用域中添加函数? 它在模板?
当前回答
你可以用你的视频。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>
其他回答
<div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>
你可以像上面一样使用ng-if指令。
在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>
在这种情况下，您希望根据对象属性“计算”像素值。
我会在控制器中定义一个函数来计算像素值。
在控制器中:
$scope.GetHeight = function(aspect) {
if(bla bla bla) return 270;
return 360;
}
然后在模板中写:
element height="{{ GetHeight(aspect) }}px "
你可以用你的视频。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>
我同意三元是非常干净的。似乎这是非常情境的，虽然作为一些我需要显示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>
