我想在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。不知道该如何应对这种情况:
ng-repeat
Angularjs(低于1.1.5版)不提供此if/else功能。以下是您要达到的目标的几种选择:
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
show`](https://docs.angularjs.org/api/ng/directive/ngShow)指令
或者,您也可以使用,ng-show/ng-hide但是使用它实际上将同时渲染一个大视频和一个小视频元素,然后隐藏一个满足ng- hide条件的元素,并显示一个满足ng-show条件的元素。因此,在每个页面上,您实际上将呈现两个不同的元素。
ng-show/ng-hide
ng- hide
ng-show
class`](https://docs.angularjs.org/api/ng/directive/ngClass)指令。
可以如下使用。
<div ng-class="{large-video: video.large}"> <!-- video block goes here --> </div>
large-video如果video.large属实,以上内容基本上将为div元素添加一个CSS类。
large-video
video.large
directive`](https://docs.angularjs.org/api/ng/directive/ngIf)
ng-if
在以上版本中,1.1.5您可以使用ng- if指令。如果提供的表达式返回false,则将删除该元素,如果表达式返回,则将其重新插入elementDOM中true。可以如下使用。
1.1.5
ng- if
false
element
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>