首页 > 代码库 > 用angular中的ng-repeat和ng-show来实现tab选项卡

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

2024-11-04 22:03:01   210人阅读

虽然我们可以用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选项卡


联系
我们