if语句 – 如果else语句在AngularJS模板中
我想在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) 三元运算符: 正如@Kirk在注释中所建议的,最简单的方法是使用三元运算符,如下所示: <span>{{isLarge ? 'video.large' : 'video.small'}}</span>
可以使用像下面这样的东西。 <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-show / ng-hide,但使用它将实际渲染大视频和小视频元素,然后隐藏符合ng-hide条件的视频元素,并显示符合ng-show条件的视图。所以在每个页面上,你实际上将渲染两个不同的元素。 4.另一个需要考虑的选择是 这可以如下使用。 <div ng-class="{large-video: video.large}"> <!-- video block goes here --> </div> 如果video.large是真实的,上面基本上会添加一个大视频CSS类到div元素。 更新:Angular 1.1.5介绍了
在1.1.5以上的版本中,您可以使用ng-if指令。如果提供的表达式返回false,这将删除元素,如果表达式返回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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |