一、蓝瘦~香菇

  经常在项目中使用ng-if和ng-show来处理一些简单的状态,今天碰到一个复杂的状态判断,不经让我想起ng-switch。第一次接触他的时候,我没怎么注意他,因为我直接把他当作其他语言中的switch了,甚至不知道他和ng-if、ng-show的作用相同,是用来控制元素的显示和隐藏的

   其实有语言基础的,用脚指头都能想到,switch语句在语言中为何会出现?其正是为了弥补选择结构上代码的冗余,所以他又叫做多分支选择语句,而if~else或者if~else if~else if~else这类的选择结构语句在多种条件判断下就显得又臭又长了,我觉着就从这点来看既然我知道ng-if是干吗的,我就应该分分钟认识到ng-switch是干吗的,结果我一直给自己挖了个坑。。蓝瘦~香菇~(┬_┬),看完本文你会晓得:

display:none内部原来是宽高的问题,visibility:hidden依旧

为什么有了ng-if还要有ng-switch和ng-show

二、区别与应用

  上边谈到ng-if、ng-switch、ng-show都能用来控制元素的隐藏和显示,其内部区别肯定还是有不同的,具体来看:

ng-if:接收boolean类型的值,若为false则元素dom节点会不存在改为一个注释语句

ng-switch:与我们常见的switch语句语法相似,配合ng-switch-when和ng-switch-default使用,上文也说过,既然switch当时出现的原因是为了弥补if的缺憾,那他和ng-if所展示的效果自然也相同咯-----若为false则元素dom节点会不存在改为一个注释语句

ng-show:接收boolean类型的值,若为false则相当于为该元素增加了一个display:none的属性,学过css的都知道,display这里有个知识点是他和visibility的区别。嗯,有人回答了,前者让其在网页中不占空间了,后者其还在原来的位置上,只是变为不可见。


ng-switch用法 <div ng-controller="test">
<ul ng-switch="case">
<li ng-switch-when="a1">a1</li>
<li ng-switch-when="a2">a2</li> //选中
<li ng-switch-when="a3">a3</li>
<li ng-switch-when="a4">a4</li>
<li ng-switch-when="a5">a5</li>
<li ng-switch-default="a6">a6</li>
</ul>
</div> $scope.case = "a2";


ng-if和ng-show的用法 <li ng-show="false">1</li> <li ng-if="false">1</li>

三、讨伐

  读完上部分,不管你信不信,我貌似是终于总结出来为什么有了ng-if还要ng-show和ng-switch了,其内部做的事情决定了渲染时的性能(有些在页面初始化时就有dom元素了,有些需要的时候再产生dom元素即可),也决定了他的应用场景(如ng-switch可以做多tab的切换)。

  不过上文还有个问题点,误导我一时,相信挺多像我一样的小菜现在也依旧被蒙在谷里,那就是display:none是不占位置,其实我还真不理解啥子叫不占位置,哥们,你说的真笼统,本着严谨的心态,我还是查了下,前方高能———其实“display:none”真正的作用是置元素的宽高为失效状态,那啥子叫失效状态呢?其实就是height和width都为不可设自动变为auto值。这也就可以理解这两者的其他区别如涉及到回流和重绘方面的问题和为什么display后其子孙也会被隐藏,而visibity的子子孙孙还有办法被显示。

  所以我想,display:none和visibility的区别要重新掰正一下了,其真正的原理是前者置宽高为不可设状态且子孙会沿袭,后者置可见度为hidden且子孙也会沿袭

angularjs之ng-if、ng-show、ng-switch那些事的更多相关文章

  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. Ngnice-国内ng学习网站

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

  4. 国内ng学习网站

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

  5. [译]ng指令中的compile与link函数解析 转

    通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神 ...

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

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

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

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

  8. ng环境搭建步骤

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

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

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

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

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

随机推荐

  1. 微信JS接口

      微信JS接口 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置来源:http://www.cnblogs.com/txw1958/p/ ...

  2. 我的.NET自学之路

    我第一门语言接触的并不是.net,而是php刚学php感觉还好,但是一学到后面就有一点头晕乎乎的,我感觉没有一个好的编写php代码的编辑器.而且php是弱类型语言,感觉起来没有像c,java,c#这些 ...

  3. JVM垃圾回收算法

  4. centos6.5安装oracle11g_2

    centos7安装oracle数据库不成功,换成centos6.5安装,可以安装成功,记录一下 安装系统时,主机名如果不是用localhost,安装成功后,要用主机名和ip做映射,修改/etc/hos ...

  5. C#中Trim()、TrimStart()、TrimEnd()的用法

    string s = " from dual union all ";          s = s.Trim().TrimEnd("union all".To ...

  6. service和serviceImpl的选择

    同行中,有些同行公司的代码风格是service层=service接口+serviceImpl实现类: 而有的同行公司的代码风格是service层=service类: 为什么不一样呢? 以前没想过这个问 ...

  7. JAVA关键字与保留字说明及使用

    1.abstract 2.boolean 3.break 4.byte 5.case 6.catch 7.char 8.class 9.continue 10.default 11.do 12.dou ...

  8. 完整的PHP MYSQL数据库类

    <?php class mysql {     private $db_host; //数据库主机     private $db_user; //数据库用户名     private $db_ ...

  9. css中为了清除浮动经常用到的after样式

    .cf:after { display: block; visibility: hidden; width:; height:; line-height:; font-size:; clear: bo ...

  10. main(int argc, char **argv)参数解读

    main(int argc, char **argv)参数解读 编译生成了test.exe ,然后在控制台下相应的目录下输入:test  1  2  3 4 argc就是一个输入了多少个参数,包括te ...