首页 > 其他 > 详细

Angular零星知识点2

时间:2016-03-10 10:52:06      阅读:109      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!