问题描述
限时送ChatGPT账号..我想在 AngularJS 模板中做一个条件.我从 Youtube API 获取视频列表.部分视频的比例为 16:9,部分视频的比例为 4:3.
我想创建一个这样的条件:
如果 video.yt$aspectRatio 等于宽屏,则元素的属性 height="270px"别的元素的属性 height="360px"
我正在使用 ng-repeat
迭代视频.不知道我该怎么办这种情况:
Angularjs(低于 1.1.5 的版本)不提供 if/else
功能.以下是您要实现的目标,需要考虑的几个选项:
(如果您使用的是 1.1.5 或更高版本,请跳转到下面的更新 (#5))
1.三元运算符:
正如@Kirk 在评论中所建议的,最简洁的方法是使用三元运算符,如下所示:
{{isLarge ?'video.large' : 'video.small'}}</span>
2.ng-switch
指令:
可以像下面这样使用.
<div ng-switch-when="video.large"><!-- 渲染大视频块的代码--><div ng-switch-default><!-- 呈现常规视频块的代码-->
3.ng-hide
/ng-show
指令
或者,您也可以使用 ng-show/ng-hide
但使用它实际上会同时渲染一个大视频和一个小视频元素,然后隐藏符合 ng 的元素-hide
条件并显示符合ng-show
条件的那个.因此,在每个页面上,您实际上将呈现两个不同的元素.
4.另一个需要考虑的选项是 ng-class
指令.
这可以如下使用.
<!-- 视频块放在这里-->
如果 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"><!-- 呈现常规视频块的代码-->
I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio.
I want to make a condition like this:
if video.yt$aspectRatio equals widescreen then
element's attr height="270px"
else
element's attr height="360px"
I'm iterating the videos using ng-repeat
. Have no idea what should I do for this condition:
Angularjs (versions below 1.1.5) does not provide the if/else
functionality . Following are a few options to consider for what you want to achieve:
(Jump to the update below (#5) if you are using version 1.1.5 or greater)
1. Ternary operator:
As suggested by @Kirk in the comments, the cleanest way of doing this would be to use a ternary operator as follows:
<span>{{isLarge ? 'video.large' : 'video.small'}}</span>
2. ng-switch
directive:
can be used something like the following.
<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
directives
Alternatively, you might also use ng-show/ng-hide
but using this will actually render both a large video and a small video element and then hide the one that meets the ng-hide
condition and shows the one that meets ng-show
condition. So on each page you'll actually be rendering two different elements.
4. Another option to consider is ng-class
directive.
This can be used as follows.
<div ng-class="{large-video: video.large}">
<!-- video block goes here -->
</div>
The above basically will add a large-video
css class to the div element if video.large
is truthy.
UPDATE: Angular 1.1.5 introduced the ngIf directive
5. ng-if
directive:
In the versions above 1.1.5
you can use the ng-if
directive. This would remove the element if the expression provided returns false
and re-inserts the element
in the DOM if the expression returns true
. Can be used as follows.
<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>
这篇关于AngularJS 模板中的 if else 语句的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论