Tab标签栏 切换 权威总结
angular的标签栏,有两种方法实现:
- 内容全部加载到页面中,再利用ng-show指令。
- 将每一块要加载的内容做成模板,利用ng-if指令加载。
- 用bootstrap的tab组件
- 用angular的ui-bootstrap中<tab><uib-tab>标签
详细例子如下:
- 1、ng-show
<script>
var App = angular.module("App",[]); App.controller('DatailController',['$scope',function($scope){ $scope.detailDownTitle = { title :[ "选题详情","关联内容","推荐内容","流程日志" ], count : 0, datailShow : function(index){ if(index==0){ this.count=0; }else if(index==1){ this.count=1; }else if(index==2){ this.count=2; }else if(index==3){ this.count=3; }else{ } } }]);
</script>
HTML模板如下:
<div class="detailDown"> <ul class="detailDownTitle"> <li data-ng-repeat="title in detailDownTitle.title" data-ng-click="detailDownTitle.datailShow($index)"><a>{{title}}</a></li> //将$index传参,确定单击的哪一个Tab </ul>
<div data-ng-show="detailDownTitle.count==0">
<div>Tab1</div>
</div>
<div data-ng-show="detailDownTitle.count==1">
<div>Tab2</div>
</div>
<div data-ng-show="detailDownTitle.count==2">
<div>Tab3</div>
</div>
<div data-ng-show="detailDownTitle.count==3">
<div>Tab4</div>
</div>
</div>
主页index.html引入方式如下
<div class="detailContent" data-ng-include=" 'topicDetail.html' " ng-controller= "DatailController"> //注意路径 </div>
- 2、ng-if
script标签内容一样,HTML模板如下:
<div class="detailDown"> <ul class="detailDownTitle"> <li data-ng-repeat="title in detailDownTitle.title" data-ng-click="detailDownTitle.datailShow($index)"><a>{{title}}</a></li> </ul> <div data-ng-include=" '/topic/template/topicContent.html' " data-ng-if="detailDownTitle.count==0"></div> <div data-ng-include=" '/topic/template/linkContent.html' " data-ng-if="detailDownTitle.count==1"></div> <div data-ng-include=" '/topic/template/recommendContent.html' " data-ng-if="detailDownTitle.count==2"></div> </div>
- 3、bootstrap组件
这里,将bootstrap官网http://v3.bootcss.com/javascript/对应的JavaScript插件代码做了些许变化。将不同的标签展示的内容引入不同的模板,而不是写死的内容。剩下的就是调整一下样式就可以了。
<ul class="nav nav-tabs tab-layer" role="tablist"> <li role="presentation" class="active tab-list"> <a href="#topic-content" role="tab" data-toggle="tab" >选题详情</a> </li> <li role="presentation" class="tab-list"> <a href="#link-content" role="tab" data-toggle="tab">关联内容</a> </li> <li role="presentation" class="tab-list"> <a href="#recommend-content" role="tab" data-toggle="tab">推荐内容</a> </li> <li role="preseontation" class="tab-list"> <a href="#flow-log" role="tab" data-toggle="tab">流程日志</a> </li> </ul> <div class="detail-cnt tab-content"> <div role="tabpanel" class="tab-pane active" id="topic-content" data-ng-include="'ns-topic/template/topicContent.html'"></div> <div role="tabpanel" class="tab-pane" id="link-content" data-ng-include="'ns-topic/template/linkContent.html'"></div> <div role="tabpanel" class="tab-pane" id="recommend-content" data-ng-include="'ns-topic/template/recommendContent.html'"></div> <div role="tabpanel" class="tab-pane" id="flow-log" data-ng-include="'ns-topic/template/flowLog.html'"></div> </div>
- 4、angular的ui-bootstrap(推荐)
查看相关api,对ui-bootstrap-tpls-0.14.0以前的版本用<tab>标签,该版本之后的用<uib-tab>标签。
<uib-tabset active="activeJustified" justified="true"> <uib-tab index="0" heading="tab1">tab1内容</uib-tab> <uib-tab index="1" heading="tab2">tab2内容</uib-tab> <uib-tab index="2" heading="tab3">tab3内容</uib-tab> </uib-tabset>
这里引用的是最新的版本ui-bootstrap-tpls-2.3.0.min.js,大家可以在这里下载各个版本,不要忘了引入bootstrap.css,测试一下,可以吗?可以吗?可以吗?
报错!
报错!!
报错!!!
开始怀疑了,API上写的为啥不行,哪都没错啊,为啥?
个人理解是标签不正规,但是换一种思路,将其作为属性试一下:
<div uib-tabset active="activeJustified" justified="true"> <div uib-tab index="0" heading="tab1">tab1内容</div> <div uib-tab index="1" heading="tab2">tab2内容</div> <div uib-tab index="2" heading="tab3">tab3内容</div> </div>
done!剩下的就是稍微调整一下样式就可以了。
最后,如果后续发现新的实现方法,会继续总结