AngularJs ngIf、ngSwitch、ngHide/ngShow
来源:互联网 发布:淘宝图片ps后算盗图吗 编辑:程序博客网 时间:2024/05/14 07:56
在组合这些ng指令写到一篇文章里的时候,基本是有规则的,本兽会将功能相似相近的一类整合到一篇文章,方便理解和记忆。
这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断。
ngIf
ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作。
格式:ng-if=“value”
value:表达式 返回结果为boolean类型。
使用代码:
<input type="button" value="show/hide" ng-click="show = !show;" /> <div ng-if="show">Hello World</div>
这里做了个对Hello World 所在的div的显示/隐藏效果。但是如果你打开浏览器开发工具去审查元素,会发现这个div是被移除和添加的,只留下一个注释“<!-- ngIf: show -->”在div所在的地方。这个需要和下面的ngShow/ngHide做个区分。也就是说这个指令对DOM的操作是移除出/添加进DOM树了。
ngSwitch
ngSwitch指令可以根据表达式的结果在模板上按条件切换DOM结构。元素内使用ngSwitch而没使用ngSwitchWhen或者ngSwitchDefault指令的将会被保存在模板中。
格式:ng-switch on=“expression” ng-switch-default ng-switch-when=“value”
expression: 表达式,返回判断的条件是否成立的boolean值。
value:设置的条件
使用代码:
<div ng-app="Demo" ng-controller="testCtrl as ctrl"> <select ng-model="ctrl.tpl" ng-options="i for i in ctrl.select"> <option value="0">请选择模板</option> </select> <div ng-switch on="ctrl.tpl"> <p ng-switch-default>tpl-one</p> <p ng-switch-when="tpl-two">tpl-two</p> <p ng-switch-when="tpl-three">tpl-three</p> </div> </div>
(function () { angular.module("Demo", []) .controller("testCtrl", testCtrl); function testCtrl() { this.select = ["tpl-one", "tpl-two","tpl-three" ]; this.tpl = this.select[0]; }; }());
ngSwitch根据表达式的成立与否添加对应的内容到写好的HTML位置,而这个位置当表达式为false时也是个注释就像:“<!-- ngSwitchWhen: tpl-two -->”。这是第二个模板绑定的位置,当表达式满足第二个模板的条件,那么这里就会被第二个模板的HTML代替并显示到页面。
ngHide/ngShow
NgHide/ngShow指令显示或隐藏指定的THML元素。元素的显示隐藏是根据元素上ng-hide的css样式添加删除实现的。
格式:ng-hide=”value” ng-show=”value”
value:表达式 结果为boolean类型。
使用代码:
<input type="button" value="show/hide" ng-click="show = !show;" /> <div ng-show="show">Hello</div> <div ng-hide="show">World</div>
- AngularJs ngIf、ngSwitch、ngHide/ngShow
- angular2指令解读:ngFor,ngIf,ngSwitch,ngStyle,ngClass用法
- AngularJS 的 ngSwitch 指令 (directive) 使用陷阱
- angular学习总结二——数据&事件绑定(ngIf、ngFor、ngSwitch、ngModel)
- AngularJS中关于ng-class和*ngIf指令
- AngularJS中的双向数据绑定 ng-bind,ngshow,ng-hide,ng-class,ngAnimate
- angular2 *ngIf的用法
- 用*ngIf 代替 hidden
- *ngFor 和 * ngIf
- angular2的ngfor ngif指令嵌套
- angular2的ngfor和ngif指令嵌套
- *ngif 和 显示隐藏的区别
- AngularJS
- angularjs
- Angularjs
- angularJS
- AngularJS
- AngularJS
- Elasticsearch报警插件Watch安装以及使用
- table 表头斜线 canvas自适应
- 携程大数据实践:高并发应用架构及推荐系统案例
- iOS 获取私有api的方法
- <sdut-ACM>交叉排序
- AngularJs ngIf、ngSwitch、ngHide/ngShow
- 常见例题:输出所有可见ASCII码
- find命令中的选项解释
- linux中find命令的用法
- Linux服务器安全配置
- Codeforces Round #353 (Div. 2) C. Money Transfers (贪心)
- Centos 7防火墙firewalld开放80端口
- Rtrofit2源码解析
- web项目中,数据库驱动找不到类加载器之类的空指针或者类未找到错误