ng-if、ng-show和ng-hide指令的区别

本是古典何须时尚 2022-07-12 03:53 160阅读 0赞

angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素。当赋值给ng-show指令的值为false时元素会被隐藏，值为true时元素会显示。ng-hide功能类似，使用方式相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。

**\[javascript\]** view plain copy

print ?

1.  <div ng-show=“2 + 2 == 5”>  
2.  2 + 2 isn’t 5, don’t show  
3.  </div>  
4.  <div ng-show=”2 + 2 == 4”>  
5.  2 + 2 is 4, do show  
6.  </div>

![save_snippets.png][]

ng-if指令可以根据表达式的值在DOM中生成或移除一个元素。如果赋值给ng-if的表达式的值是false，那对应的元素将会从DOM中移除，否则生成一个新的元素插入DOM中。ng-if同no-show和ng-hide指令最本质的区别是，它不是通过CSS显示或隐藏DOM节点，而是删除或者新增结点。

**\[javascript\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <div ng-if=“2+2===5”>  
2.  Won’t see this DOM node, not even in the source code  
3.  </div>  
4.  <div ng-if=“2+2===4”>  
5.  Hi, I do exist  
6.  </div>

![save_snippets.png][]

<div ng-if="2+2===5">
    Won't see this DOM node, not even in the source code
    </div>
    <div ng-if="2+2===4">
    Hi, I do exist
    </div>

ng-if重新创建元素时用的是它们编译后的状态。如果ng-if内部的代码加载之后被jQuery修改过（例如用.addClass），那么当ng-if的表达式值为false时，这个DOM元素会被移除，表达式再次成为true时这个元素及其内部的子元素会被重新插入DOM，此时这些元素的状态会是它们的原始状态，而不是它们上次被移除时的状态。也就是说无论用jQuery的.addClass添加了什么类都不会存在了。而ng-show和ng-hide则可以保留dom元素上次修改后的状态。

当一个元素被ng-if从DOM中移除，同它关联的作用域也会被销毁。而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。

**\[html\]** view plain copy

print ? [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  <html ng-app>  
2.  <head>  
3.      <script src=“angular-1.2.25.js”></script>    
4.      <script>  
5.          function myController(scope)&nbsp;&nbsp;</span></li><li class=""><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\{&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope.keyworld = “”;  
6.          \}  
7.      </script>  
8.  </head>  
9.  <body ng-controller=“myController”>  
10.     <input type=“text” ng-model=“keyworld”>  
11.     <input type=“button” value=“clear” ng-click=“keyworld=”” ng-show=“keyworld !=” ”>  
12. </body>

![save_snippets.png][]

<html ng-app>
    <head>
        <script src="angular-1.2.25.js"></script>  
        <script>
            function myController($scope)
            {
                $scope.keyworld = "";
            }
        </script>
    </head>
    <body ng-controller="myController">
        <input type="text" ng-model="keyworld">
        <input type="button" value="clear" ng-click="keyworld=''" ng-show="keyworld !='' ">
    </body>

[save_snippets.png]: /images/20220711/47990b0ea75c4bba9fdcf90dc68ed41d.png
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/631076
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/631076/fork