首页 > 代码库 > 用angular中的ng-repeat和ng-show来实现tab选项卡
用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>
我认为这个是非常方便的;希望对大家有所帮助
用angular中的ng-repeat和ng-show来实现tab选项卡
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。