前端之家收集整理的这篇文章主要介绍了
angular 写 选项卡，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
<!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>
