首页 > 代码库 > Tab标签栏 切换 权威总结
Tab标签栏 切换 权威总结
angular的标签栏,有两种方法实现:
- 内容全部加载到页面中,再利用ng-show指令。
- 将每一块要加载的内容做成模板,利用ng-if指令加载。
详细例子如下:
- 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>
- 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>
如果后续发现新的实现方法,会继续总结
Tab标签栏 切换 权威总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。