四、ng-if、ng-show、ng-switch
参考： AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
简单总结:
ng-show和ng-hide只是显示或隐藏了DOM节点，节点依然会被加载渲染
ng-if与ng-show一样都是接收一个bool，但是当ng-if为false时，它控制的DOM节点不会被创建或者之前的DOM节点会被销毁，可加快DOM加载速度
ng-switch省去了tab选项卡时的麻烦，它监听一个变量，变量值为a时，a控制的DOM节点就会被创建显示，变量值为b时，a的DOM节点被销毁，b的DOM节点被创建
ng-switch没用过，下面是个小例子：
<script type="text/javascript">
var DemoCtrl = function($scope){
$scope.ShowMode = "a";
$scope.ChangeShow = function(ShowMode){
$scope.ShowMode = ShowMode;
}
};
</script>
</head>
<body ng-controller="DemoCtrl" ng-switch="ShowMode">
<div class="well span6" ng-switch-when="a">
我是a
</div>
<div class="well span6" ng-switch-when="b">
我是b
</div>
<div class="well span6" style="float:none;">
<button ng-click="ChangeShow(‘a‘)">switch to a</button>
<button ng-click="ChangeShow(‘b‘)">switch to b</button>
<br/>
</div>
</body>
时间： 2024-11-16 01:15:19