<!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>
转载于:https://my.oschina.net/zhubaoxin/blog/761529