我想在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迭代视频。我不知道该怎么办这个条件：
答案 0 :(得分：1249)
Angularjs（1.1.5以下版本）不提供if/else功能。以下是您要实现的目标的几个选项：
（ 如果您使用的是1.1.5或更高版本，则跳转到下面的更新（＃5） ）
正如@Kirk在评论中所建议的那样，最简洁的方法是使用三元运算符，如下所示：
<span>{{isLarge ? 'video.large' : 'video.small'}}</span>
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>
ng-hide / ng-show指令或者，您也可以使用ng-show/ng-hide，但使用此功能实际上会同时呈现大型视频和小型视频元素，然后隐藏符合ng-hide条件的视频元素并显示符合ng-show条件的视频元素{1}}条件。因此，在每个页面上，您实际上将呈现两个不同的元素。
ng-class指令。这可以使用如下。
<div ng-class="{large-video: video.large}">
<!-- video block goes here -->
</div>
如果large-video是真的，上面基本上会向div元素添加一个video.large css类。
ngIf directive ng-if指令：在1.1.5上面的版本中，您可以使用ng-if指令。如果提供的表达式返回false，则会删除元素，如果表达式返回element，则会在DOM中重新插入true。可以如下使用。
<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 :(得分：171)
在最新版本的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>
答案 2 :(得分：133)
三元是最明确的做法。
<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
答案 3 :(得分：41)
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>
答案 4 :(得分：27)
您可以直接使用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 :(得分：10)
在这种情况下，您希望根据对象属性“计算”像素值。
我会在控制器中定义一个计算像素值的函数。
在控制器中：
$scope.GetHeight = function(aspect) {
if(bla bla bla) return 270;
return 360;
}
然后在你的模板中写下：
element height="{{ GetHeight(aspect) }}px "
答案 6 :(得分：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>
答案 7 :(得分：3)
<div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>
你可以使用上面的ng-if指令。
答案 8 :(得分：2)
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';
}
}
谢谢和最诚挚的问候，
扬
答案 9 :(得分：1)
ng If else语句
ng-if="receiptData.cart == undefined ? close(): '' ;"