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

我認爲這個是很是方便的；但願對你們有所幫助