我想在 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
迭代视频。不知道我应该怎么做这种情况:
在范围内添加一个函数?
在模板中做吗?
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
是真的,上面基本上会向 div 元素添加一个 large-video
css 类。
更新:Angular 1.1.5 引入了 ngIf 指令
5. ng-if 指令:
在 1.1.5
以上的版本中,您可以使用 ng-if
指令。如果提供的表达式返回 false
,这将删除元素,如果表达式返回 true
,则将 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>
ng-if
引入了一个隔离范围,因此 $parent
在 ng-if
的主体中变为 $parent.$parent
。
三元是最明确的方法。
<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
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>
ng-if="someCondition && someOtherCondition"
。也许我误会了? (我编写了那个模块——它应该像 JS 中的 if
和 else
一样工作)。
您可以通过过滤器直接使用您的 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>
video.yt$aspectRatio
为空或未定义时,您的代码如何?是否可以应用默认值?
在这种情况下,您希望根据对象属性“计算”像素值。
我会在控制器中定义一个计算像素值的函数。
在控制器中:
$scope.GetHeight = function(aspect) {
if(bla bla bla) return 270;
return 360;
}
然后在您的模板中,您只需编写:
element height="{{ GetHeight(aspect) }}px "
我同意三元非常干净。似乎这是非常有情境的,尽管我需要显示 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';
}
}
谢谢和最好的问候,
简
ng If else 语句
ng-if="receiptData.cart == undefined ? close(): '' ;"
ng-switch on="video"
而不是ng-switch-on="video"
<span>{{isAdded ? 'Added' : 'Add to cart'}}</span>
ng-hide
和ng-show
不同,ng-if
不会将封闭的元素添加到 DOM,直到其条件评估为true
。ng-switch="video"
?一些问题?还是之前不可用?对我来说它工作得很好