一、蓝瘦~香菇

  经常在项目中使用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. 【BZOJ-4082】Surveillance 树链剖分 LCA + 贪心

    4082: [Wf2014]Surveillance Time Limit: 40 Sec  Memory Limit: 128 MBSubmit: 260  Solved: 100[Submit][ ...

  2. reGeorg v1.0内网流量转发

    reGeorg v1.0 git Usage $ reGeorgSocksProxy.py [-h] [-l] [-p] [-r] -u [-v] Socks server for reGeorg H ...

  3. poj 1390 Blocks

    poj 1390 Blocks 题意 一排带有颜色的砖块,每一个可以消除相同颜色的砖块,,每一次可以到块数k的平方分数.问怎么消能使分数最大.. 题解 此题在徐源盛<对一类动态规划问题的研究&g ...

  4. 【原】fiddler修改线上的内容

    摘要:当我们线上的代码出bug了,咋办呢?有时候本地的代码跟线上的代码还是运行环境还是有区别的.比如有些封装的方法需要运动到手机上可以调试,而浏览器是无法调试的.如果不想每次修改完再放上到测试环境看效 ...

  5. Java开发面试总结

    Java开发面试总结.. ----------------------- java 基础知识点这一块: 1.面向对象的三大特征.(继承,封装,多态) 1.1 在什么样的场合下面会使用到继承 1.2 什 ...

  6. SDL简介(网络汇总)

    摄像头视频播放采用sdl,下面简单介绍下.不保证正确及网址永远有效.后面文章采用tao框架http://sourceforge.net/projects/taoframework/      SDL. ...

  7. IO

    文件过滤 http://codego.net/9245/ C# 文件处理 http://wenku.baidu.com/link?url=yXKiIA_OZYR4MIynDgz-qhOnfJoCyOQ ...

  8. php提供更快的文件下载

    在微博上偶然看到一篇介绍php更快下载文件的方法,其实就是利用web服务器的xsendfile特性,鸟哥的博客中只说了apache的实现方式,我找到了介绍nginx实现方式的文章,整理一下! let' ...

  9. XMPP开发环境配置

    首先配置XMPP开发环境配置需要的软件 先安装xampp-osx-1.8.3-5-installer.dmg 安装成功后launchpad里会多出一个XAMPP(其他),点开里面的manager-os ...

  10. 跟随 Web 标准探究DOM -- Node 与 Element 的遍历

    写在前面 这篇没有什么 WebKit 代码的分析,因为……没啥好分析的,在实现里无非就是树的(先序DFS)遍历而已,囧哈哈哈……在WebCore/dom/Node.h , WebCore/dom/Co ...