栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

AngularJS模板中的if else语句

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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">        <!-- pre to render a large video block-->    </div>    <div ng-switch-default>        <!-- pre to render the regular video block -->    </div></div>

3.
ng-hide
/ [`ng-

show`](https://docs.angularjs.org/api/ng/directive/ngShow)指令

或者,您也可以使用,

ng-show/ng-hide
但是使用它实际上将同时渲染一个大视频和一个小视频元素,然后隐藏一个满足
ng-hide
条件的元素,并显示一个满足
ng-show
条件的元素。因此,在每个页面上,您实际上将呈现两个不同的元素。

4.另一个要考虑的选择是[`ng-

class`](https://docs.angularjs.org/api/ng/directive/ngClass)指令。

可以如下使用。

<div ng->    <!-- video block goes here --></div>

large-video
如果
video.large
属实,以上内容基本上将为div元素添加一个CSS类。

更新:Angular 1.1.5引入了[`ngIf

directive`](https://docs.angularjs.org/api/ng/directive/ngIf)

5.
ng-if
指令:

在以上版本中,

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

<div ng-if="video == video.large">    <!-- pre to render a large video block--></div><div ng-if="video != video.large">    <!-- pre to render the regular video block --></div>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/633192.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号