AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch

来源：互联网发布：mmd常用姿势数据下载编辑：程序博客网时间：2024/06/05 21:09

在Angular的原生指令中有这几个指令用来控制元素的展示与否，ng-show/ng-hide/ng-if和ng-switch。

在angular性能优化中，我们也常常会用到它。

我们看下他们的区别。

其中ng-show和ng-hide是一样的，只不过ng-show是满足条件就展示，ng-hide是满足条件就隐藏，下面就不再提到ng-hide。

ng-show

ng-show接收的一个bool值，当为true的时候就会被触发去展示DOM节点。当ng-show的值为false的时候，在DOM节点上添加了一个ng-hide的一个类，这个类的表达式就是“display：none”。DOM load的时候ng-show里面的所有节点都会被加载。也就是说，ng-show仅仅是影藏和显示了DOM节点。也就意味如果油太多的ng-show指令，即使他们不显示，但他们所在的DOM节点还是会被渲染的。

ng-if

ng-if也接收的一个bool值，当它的值为false的时候，它所控制的节点并没有被创建或者说之前的DOM节点会被销毁掉，哪怕这个节点里面包含了很多ng的绑定都不会去执行。所以，我们在项目开发中，如果没有必要一次性加载完的dom就可以用ng-if来阻止ng事件发生，从而也就加快了dom的加载速度。特别是在repeat的时候，每条数据又包含了复杂的数据结构的时候效果特别明显。当它的值为true的时候，就会去创建DOM节点。

所以如果你用指令、模板来渲染额外的信息，例如通过点击来显示列表项的详细信息，一定要使用 ng-if（AngularJSv. 1.1.5以后）。它可阻止渲染（与ng-show相比）。

ng-switch

ng-switch的存在，让我们省去很多麻烦（应该说angular本身就这样）。比如我们之前用传统的方式去做一个tab选项卡。我们要一次次的循环然后在判断当前的状态最后再去执行相应的事情。在angular里面用ng-switch就非常的简单。ng-switch要先监听某一个变量，当此变量为什么值的时候下面就显示什么内容。如上面显示的，监听了type这么一个变量，当type的值等于‘aaa’的时候这块区域就会被创建并显示；当type的值等于‘bbb’的时候，之前'aaa'的dom全部会被销毁，然后'bbb'dom全部创建并显示。

示例如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!doctype html>
<htmlng-app>
<head>
    <metacharset="UTF-8">
    <title></title>
    <linkrel="stylesheet"href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
    <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script>
    <scripttype="text/javascript">
        var DemoCtrl = function($scope){           
            $scope.ShowMode = "list";
 
            $scope.ChangeShow = function(ShowMode){
                $scope.ShowMode = ShowMode;
            }
        };
    </script>
</head>
<bodyng-controller="DemoCtrl"ng-switch="ShowMode">
    <divclass="well span6" ng-switch-when="list">
        我是列表區塊
    </div>   
    <divclass="well span6" ng-switch-when="add">
        我是新增區塊
    </div>
    <divclass="well span6" ng-switch-when="edit">
        我是修改區塊
    </div>
    <divclass="well span6" ng-switch-when="detail">
        我是明細區塊
    </div>   
    <divclass="well span6" style="float:none;">     
    <buttonng-click="ChangeShow('list')">switch to list</button>
    <buttonng-click="ChangeShow('add')">switch to add</button>
    <buttonng-click="ChangeShow('edit')">switch to edit</button>
    <buttonng-click="ChangeShow('detail')">switch to detail</button>
    <br/>
    </div>
</body>
</html>

1 0