ng-show ng-hide ng-if的区别
用途
- ng-show ng-hide ng-if三个都可以用来控制页面DOM元素的显示与隐藏。
- ng-hide条件为true时,隐藏所在元素,false时显示所在元素。
- ng-show相反,条件为true时,显示所在元素,false时隐藏所在元素。
- ng-if 根据表达式的值动态的在当前页面中添加删除页面元素,如果表达式的值为flase,那么这个元素就会从页面中删除,否则会添加一个元素。
工作原理
- 在实现原理方面:ng-show和ng-hide是通过修改css样式的方式控制元素的显示与隐藏,对应的DOM元素会一直存在于当前页面中,而ng-if根据表达式的值动态的添加或者删除元素。ng-if创建元素时,用的是它编译后的代码,如果ng-if内部的代码被其他方式修改过,那么修改只会对本次展现有效,页面重新渲染后修改的效果就会消失,而ng-show和ng-hide则能够保留在DOM元素上次修改后的状态。
在作用域方面
当一个元素,被ng-if从DOM中删除时,与其关联的作用域也会被销毁,当他重新加入DOM中时,会生成一个新的作用域,而ng-show和ng-hide则不会。
ng-show ng-hide ng-if的区别的更多相关文章
- 不知道张(zhāng)雱(pāng)是谁?你out了!
张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...
- ng build --aot 与 ng build --prod
angluar的编译有以下几种方式: ng build 常规的压缩操作 代码体积最大 ng build --aot angular预编译 代码体积较小 ng build --pr ...
- 【码在江湖】前端少侠的json故事(中)ng的json
ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...
- 高可用Hadoop平台-Flume NG实战图解篇
1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...
- Ngnice-国内ng学习网站
今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...
- 国内ng学习网站
Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...
- ng环境搭建步骤
1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...
- Ng Alain使用 - cli和克隆两种方式
感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- angular2 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...
随机推荐
- m_Orchestrate learning system---二十二、html代码如何变的容易
m_Orchestrate learning system---二十二.html代码如何变的容易 一.总结 一句话总结:(结构清晰之后构建页面就变得超级容易了)(多做多用一下子就熟了) 1.文章显示页 ...
- c:\Windows\System32\drivers\etc\hosts的作用
c:\Windows\System32\drivers\etc\hosts 是域名解析文件. 可以直接用记事本打开.将IP地址重定向. 格式为:ip地址-空格-域名 可以将一个域名重新定向到一个IP ...
- BZOJ 2588 主席树
思路: 主席树 做完BZOJ 3123 觉得这是道水啊-- 然后狂RE 狂MLE 要来数据 忘把deep[1]设成1了----------. 啊wocccccccccccccccc //By Siri ...
- Java7里try-with-resources分析--转
原文地址:http://blog.csdn.net/hengyunabc/article/details/18459463 这个所谓的try-with-resources,是个语法糖.实际上就是自动调 ...
- 微信重排版 URL
http://qbview.url.cn/getResourceInfo?appid=62&url=https%3A%2F%2Fcodepen.io%2Fbenjamminf%2Ffull%2 ...
- LeetCode hard 668. Kth Smallest Number in Multiplication Table(二分答案,一次过了,好开心,哈哈哈哈)
题目:https://leetcode.com/problems/kth-smallest-number-in-multiplication-table/description/ 668. Kth S ...
- BootStrap学习(一)——BootStrap入门
1.环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目 ...
- Apache Ignite - 轉
Ignite Docs Online: ignite-doc-cn https://dongwq.gitbooks.io/ignite-doc/content/index.html - Apache ...
- PostgreSQL 索引膨胀
索引膨胀,主要针对B-tree而言 索引膨胀的几个来源: 大量删除发生后,导致索引页面稀疏,降低了索引的使用效率: PG9.0之前的版本,vacuum full会同样导致索引页面稀疏: 长时间运行的事 ...
- 【原创】不重启was server重新加载应用class文件
类装入和更新检测(Class loading and update detection settings)菜单路径:Applications < Application Types < W ...