angular中的显示与隐藏ng-show/ng-hide/ng-if/ng-switch

angular中用来控制元素的显示与隐藏的指令分别有,ng-show/ng-hide/ng-if和ng-switch.

ng-show/ng-hide:

ng-show是满足条件就展示,ng-hide是满足条件就隐藏.

因为 它们用法差不多,所以下面就单纯讲ng-show.

ng-show接收的是一个boolean值,当为值true的时候就去展示DOM节点,当值为false的时候,在dom节点上就添加一个ng-hide的类,这个类的样式是"display:none".

在DOM节点被加载的时候,ng-show里面的所有节点都会被加载,也就是说ng-show仅仅是隐藏和显示DOM节点而已.也就说当存在很多ng-show指令时候,即使它们不显示,但是它们所在的DOM节点还是会被浏览器渲染的.

ng-if:

也是接收一个bool值,当值为false时,它所控制的节点并不会被创建,也可以说之前的DOM节点会被销毁掉,哪怕这个节点里面包含有很ng指令的绑定都不会去执行.

所以在我们的项目中,如果没有必要一次性生成完所有的dom,那么就可以用ng-if来按需生成,从而加快了dom的加载速度.特别是在repeat的时候,每条数据又包含了复杂的数据结构的时候效果特别明显,因为只有当ng-if的传入值为true的时候,才会创建它所控制的节点.

ng-switch:

ng-switch要先监听一个变量,当此变量为什么值的时候下面就显示什么内容.

举个例子:

ng-switch监听了一个type这么一个变量,当type的值等于"a"的时候,那么这块区域就会被创建并显示;当type的值为"b"的时候,这块区域(a所控制的区域)就会被销毁,然后"b"所控制的那个区域(dom)就会被创建并且显示.

<ul ng-switch on={
    
    {switch}}>//监听switch的值来控制下面的li显示还是隐藏
    <li ng-switch-when="a">11111111111111111</li>
    <li ng-switch-when="b">22222222222222222</li>
    <li ng-switch-default>33333333333333333</li>
   </ul>