用途

  • 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的区别的更多相关文章

  1. 不知道张(zhāng)雱(pāng)是谁?你out了!

    张(zhāng)雱(pāng)是谁?也许你已经听说过了,也许你还没听说过呢,不过你一定听说过老刘——刘强东,没错,这二人是有关系的,什么关系,京东是老刘的,而张雱呢?张雱是京东旗下52家关联公司法人代 ...

  2. ng build --aot 与 ng build --prod

    angluar的编译有以下几种方式: ng build  常规的压缩操作    代码体积最大 ng build --aot   angular预编译      代码体积较小 ng build --pr ...

  3. 【码在江湖】前端少侠的json故事(中)ng的json

    ng的json 正所谓"人在江湖,身不由己",在开发之路上前端少侠dk遇到过种种困难,尤其在与后端进行数据对接的时候,不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式,正当他以为 ...

  4. 高可用Hadoop平台-Flume NG实战图解篇

    1.概述 今天补充一篇关于Flume的博客,前面在讲解高可用的Hadoop平台的时候遗漏了这篇,本篇博客为大家讲述以下内容: Flume NG简述 单点Flume NG搭建.运行 高可用Flume N ...

  5. Ngnice-国内ng学习网站

    今天给angular新手介绍一个国内开源的ng学习网站http://www.ngnice.com/这是由一批ng爱好者在雪狼大叔的带领下共同开发完成,致力于帮助更多的ng新人,他们分别是: ckken ...

  6. 国内ng学习网站

    Ngnice-国内ng学习网站2015-01-25 21:30 by 破狼, 534 阅读, 3 评论,收藏, 编辑 今天给angular新手介绍一个国内开源的ng学习网站http://www.ngn ...

  7. ng环境搭建步骤

    1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...

  8. Ng Alain使用 - cli和克隆两种方式

    感觉没啥要写的,但是在查看相关资料的过程中发现不少浮夸的人,可以说是完全不阅读官方文档,操作完全无厘头,,创建了删,配置,再删除,,,扯蛋....., 方式一:CLI(推荐) # 确保使用的是最新版本 ...

  9. angular 2 - 001 ng cli的安装和使用

    angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...

  10. 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 ...

随机推荐

  1. m_Orchestrate learning system---二十二、html代码如何变的容易

    m_Orchestrate learning system---二十二.html代码如何变的容易 一.总结 一句话总结:(结构清晰之后构建页面就变得超级容易了)(多做多用一下子就熟了) 1.文章显示页 ...

  2. c:\Windows\System32\drivers\etc\hosts的作用

    c:\Windows\System32\drivers\etc\hosts 是域名解析文件. 可以直接用记事本打开.将IP地址重定向. 格式为:ip地址-空格-域名 可以将一个域名重新定向到一个IP ...

  3. BZOJ 2588 主席树

    思路: 主席树 做完BZOJ 3123 觉得这是道水啊-- 然后狂RE 狂MLE 要来数据 忘把deep[1]设成1了----------. 啊wocccccccccccccccc //By Siri ...

  4. Java7里try-with-resources分析--转

    原文地址:http://blog.csdn.net/hengyunabc/article/details/18459463 这个所谓的try-with-resources,是个语法糖.实际上就是自动调 ...

  5. 微信重排版 URL

    http://qbview.url.cn/getResourceInfo?appid=62&url=https%3A%2F%2Fcodepen.io%2Fbenjamminf%2Ffull%2 ...

  6. LeetCode hard 668. Kth Smallest Number in Multiplication Table(二分答案,一次过了,好开心,哈哈哈哈)

    题目:https://leetcode.com/problems/kth-smallest-number-in-multiplication-table/description/ 668. Kth S ...

  7. BootStrap学习(一)——BootStrap入门

    1.环境搭建 中文官网下载地址:http://www.bootcss.com/ 右击选中的WEB项目,点击导入,选择文件系统,然后下一步,选择BootStrap文件目录路径,如下: 完成后,WEB项目 ...

  8. Apache Ignite - 轉

    Ignite Docs Online: ignite-doc-cn https://dongwq.gitbooks.io/ignite-doc/content/index.html - Apache ...

  9. PostgreSQL 索引膨胀

    索引膨胀,主要针对B-tree而言 索引膨胀的几个来源: 大量删除发生后,导致索引页面稀疏,降低了索引的使用效率: PG9.0之前的版本,vacuum full会同样导致索引页面稀疏: 长时间运行的事 ...

  10. 【原创】不重启was server重新加载应用class文件

    类装入和更新检测(Class loading and update detection settings)菜单路径:Applications < Application Types < W ...