AngularJS模板中的if else语句

Angularjs（1.1.5以下的版本）不提供if/else功能。以下是您想要实现的一些选项：

（如果您使用的是1.1.5或更高版本，请跳转到下面的更新（#5））

1.三元运算符：

正如@Kirk在评论中建议的那样，最干净的方法是使用三元运算符，如下所示：

<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，但使用它实际上会渲染一个大视频和一个小视频元素，然后隐藏满足ng-hide条件的视频，并显示满足ng-show条件的视频。所以在每个页面上，你实际上会渲染两个不同的元素。

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

这可以使用如下。

<div ng-class="{large-video: video.large}">
<!-- video block goes here -->
</div>

如果video.large是truthy，上面的基本上将向div元素添加一个large-video css类。

更新：Angular 1.1.5介绍了ngIf directive

5.ng-if指令：

在1.1.5以上的版本中，您可以使用ng-if指令。如果提供的表达式返回false，这将删除元素，如果表达式返回true，则在DOM中重新插入element。可以如下使用。

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

您可以通过将video.yt$aspectRatio属性通过过滤器直接使用它，并将结果绑定到模板中的高度属性。

您的过滤器看起来像：

app.filter('videoHeight', function () {
return function (input) {
if (input === 'widescreen') {
return '270px';
} else {
return '360px';
}
};
});

模板将是：

<video height=\{\{video.yt$aspectRatio | videoHeight}}></video>

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

三元组是最明确的方法。

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

Angular本身不提供if/else功能，但您可以通过包含此模块来获得它：

https://github.com/zachsnow/ng-elif

用它自己的话说，它只是“控制流指令的简单集合：ng-if、ng-else-if和ng-有助”。

示例：

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

我同意三元非常干净。似乎它非常情境化，尽管我需要显示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>

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

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

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

谢谢和最好的问候，

1月

ng如果其他语句

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