雖然我們可以用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>

我認為這個是非常方便的；希望對大家有所幫助

用angular中的ng-repeat和ng-show來實現tab選項卡