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

虽然我们可以用angular中的路由来做tab选项卡，但是那会让我们建立很多的页面来引入，或者建立 <script type="text/ng-template" id="news"></script>来装内容，
我认为都比较麻烦。所以我是使用angular中的json和angular中的ng-show来做选项卡的。

话不多说，上代码

html部分

<!--设置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>

js部分

<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>

css样式

<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>

我认为这个是非常方便的；希望对大家有所帮助