angular 写选项卡

发布时间：2020-12-17 09:50:52 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlestyle type="text/css".active{background:#ca4341;}/style/headscript src="//cdn.bootcss.com/angular.js/1.5.8/angular.js" type="text/javascript" charset="utf-8"/scriptbody ng-app="tabBox"div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.active{background:#ca4341;}
		</style>
	</head>
	<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.js" type="text/javascript" charset="utf-8"></script>
	<body ng-app="tabBox">
		<div ng-controller='tabList'>
			<input ng-click="fn($index)" ng-repeat=" cont1 in json" type="button" value="{{cont1.name}}" ng-class="num == $index ? 'active': ''"/>
			<div ng-show="num == $index" ng-repeat=" cont1 in json ">{{cont1.content}}</div>
		</div>
	</body>
	<script type="text/javascript">
		var app = angular.module( 'tabBox',[] );
		app.controller( 'tabList',function ($scope){
			$scope.num = 0;
			//下面内容可以从后台请求数据 start
			$scope.json = [
				{"name" : "前端","content" : "this is 前端1"},{"name" : "前端1","content" : "this is 前端2"},{"name" : "前端2","content" : "this is 前端3"},{"name" : "前端3","content" : "this is 前端4"},{"name" : "前端4","content" : "this is 前端5"}
			]
                        //end
			$scope.fn = function (n){
				$scope.num = n;
			}
		});
	</script>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

angular 写 选项卡

angular 写选项卡