码迷,mamicode.com
首页 > 其他好文 > 详细

Angular零星知识点2

时间:2016-03-10 10:52:57      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:

四、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>

  

Angular零星知识点2

标签:

原文地址:http://www.cnblogs.com/lww930/p/5260737.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!