如果在AngularJS模板中的其他语句
我想在AngularJS模板中做一个条件。 我从Youtube API获取video列表。 部分video比例为16：9，部分video比例为4：3。
我想要这样一个条件：
if video.yt$aspectRatio equals widescreen then element's attr height="270px" else element's attr height="360px" 我使用ng-repeat迭代video。 不知道该怎么办这个情况：
- 在范围中添加一个函数？
- 在模板中做？
Angularjs（版本低于1.1.5）不提供if/elsefunction。 以下是您想要实现的几个选项：
（ 如果您正在使用版本1.1.5或更高版本，请跳到下面的更新（＃5） ）
1.三元操作符：
正如@Kirk在评论中所build议的那样，这样做最简洁的方法是使用三元运算符，如下所示：
<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但是使用这个会实际上渲染一个大video和一个小video元素，然后隐藏符合ng-hide条件的那个，并且显示符合ng-show条件的那个。 所以在每个页面上，实际上都会渲染两个不同的元素。
4.要考虑的另一个select是ng-class指令。
这可以使用如下。
<div ng-class="{large-video: video.large}"> <!-- video block goes here --> </div>
以上基本上会增加一个large-video CSS类的div元素，如果video.large是真的。
更新： Angular 1.1.5引入了ngIf directive
5. ng-if指令：
在1.1.5以上的版本中，你可以使用ng-if指令。 如果提供的expression式返回false ，则会移除元素，如果expression式返回false ，则将该element重新插入到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>
在最新版本的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>
三元是这样做的最清楚的方法。
<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
Angular本身并不提供if / elsefunction，但你可以通过包含这个模块来获得它：
https://github.com/zachsnow/ng-elif
用它自己的话来说，它只是“控制stream程指令的简单集合：ng-if，ng-else-if和ng-else”。 使用起来很简单直观。
例：
<div ng-if="someCondition"> ... </div> <div ng-else-if="someOtherCondition"> ... </div> <div ng-else> ... </div>
你可以直接使用你的video.yt$aspectRatio属性，通过filter，并将结果绑定到你的模板的height属性。
你的filter看起来像这样：
app.filter('videoHeight', function () { return function (input) { if (input === 'widescreen') { return '270px'; } else { return '360px'; } }; });
而模板将是：
<video height={{video.yt$aspectRatio | videoHeight}}></video>
在这种情况下，您需要根据对象属性“计算”一个像素值。
我将在控制器中定义一个函数来计算像素值。
在控制器中：
$scope.GetHeight = function(aspect) { if(bla bla bla) return 270; return 360; }
然后在你的模板里写下：
element height="{{ GetHeight(aspect) }}px "
我同意三元非常干净。 似乎这是非常情况，虽然我需要显示div或p或表的东西，所以对于一个表我不喜欢三元出于显而易见的原因。 打电话给一个function通常是理想的，或者在我的情况下，我这样做：
<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>
<div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>
你可以像上面那样使用ng-if指令。
Angular的一个可能性：我必须在html部分包含一个if语句，我必须检查我生成的URL的所有variables是否定义。 我是这样做的，似乎是一个灵活的方法。 我希望这对别人有帮助。
模板中的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'; } }
感谢和最好的问候，
一月
