Angular中ng-switch指令的用法

最新推荐文章于 2023-11-12 18:01:21 发布

chisui5037

最新推荐文章于 2023-11-12 18:01:21 发布

阅读量336

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/tracypk/blog/312013

版权

用法如代码所示，实现了一个最基本的类似于tab页的切换效果：

<html ng-app>
	<head>
		<style>
			ul,li{
				list-style: none;
				float: left;
			}
			li{
				padding: 5px 10px;
				border: 1px solid;
			}
		</style>
		<script type="text/javascript" src="../libs/angular.min.js"></script>
	</head>
	<body>
		<ul  ng-init="tab='demo1'">
			<li ng-model="tab" ng-click="tab='demo1'">demo1</li>
			<li ng-model="tab" ng-click="tab='demo2'">demo2</li>
			<li ng-model="tab" ng-click="tab='demo3'">demo3</li>
		</ul>
		<div ng-switch on="tab" style="clear:left;">
			<div ng-switch-when="demo1">demo1111</div>
			<div ng-switch-when="demo2">demo2222</div>
			<div ng-switch-when="demo3">demo3333</div>
		</div>
	</body>
</html>

转载于:https://my.oschina.net/tracypk/blog/312013