用angular中的ng-repeat和ng-show来实现tab选项卡

<!--设置nav导航栏-->
<ul>
<!--nav中的导航栏内容，并给每个li设置点击事件，设置是否显示class样式-->
<li ng-repeat="v in wd" ng-click="wD($index)" class="{{wD1($index)?'wd':''}}">
{{v.font}}
</li>
</ul>
<!--设置tab选项卡的内容，并用ng-show来判断哪个tab内容显示-->
<ul ng-repeat="v in wd1" ng-show="wDBottom($index)">
<!--tab选项卡里的内容-->
<li ng-repeat="vv in v.Font">
{{vv.font}}
</li>
</ul>

<script type="text/javascript">
//angular模块
var app = angular.module("mk",[]);
//angular控制台
app.controller("ctrl",function($scope,$http){
$scope.contentwd = 0;
//建立一个json做nav导航
$scope.wd = [{"font":"1"},{"font":"2"},{"font":"3"},{"font":"4"},{"font":"5"}];
//建立一个json做tab选项卡中的内容
$scope.wd1 = [
{"Font":[
{"font":"tab1"},
{"font":"tab1"},
{"font":"tab1"}
]},
{"Font":[
{"font":"tab2"},
{"font":"tab2"},
{"font":"tab2"}
]},
{"Font":[
{"font":"tab3"},
{"font":"tab3"},
{"font":"tab3"}
]},
{"Font":[
{"font":"tab4"},
{"font":"tab4"},
{"font":"tab4"}
]},
{"Font":[
{"font":"tab5"},
{"font":"tab5"},
{"font":"tab5"}
]},
];
//导航栏中点击时获取下标来让哪个来显示
$scope.wD = function(index){
$scope.contentwd = index;
return $scope.contentwd;
}
//确定哪个导航栏的样式给哪个
$scope.wD1 = function(index){
return $scope.contentwd == index;
}
//获取下标来让哪个tab选项卡中的内容显示
$scope.wDBottom = function(index){
return $scope.contentwd == index;
}
})
</script>

<style type="text/css">
/*初始化页面*/
*{margin:0;padding:0;text-decoration: none;box-sizing: border-box;list-style: none;}
/*设置样式方便观看*/
ul:first-child{
width:500px;
height:50px;
margin:20px auto;
margin-bottom: 0;
}
ul:first-child>li{
width:100px;
height:50px;
border:1px solid #aaa;
text-align: center;
float: left;
line-height: 50px;
}
ul:first-child~ul{
width:500px;
height:350px;
margin:0px auto;
border: 1px solid #aaa;
}
/*给nav中添加的样式*/
.wd{
color:blue;
}
</style>