如何用angular渲染bootstrap中的tab切换
2016-06-24 · 知道合伙人数码行家
huanglenzhi
知道合伙人数码行家
向TA提问 私信TA
head部分：
html部分：
<body ng-app="myApp" style="background:#4A4A4A; overflow:hidden;" class="row" >
<div style="color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;">FE-演示平台</div>
<section class="row">
<section class="col-md-6" style="margin:40px auto; float:none; background:#fff; padding:30px;" ng-controller="tabDemo">
<p>通过设置改变开关：</p>
<p>
<button class="btn btn-sm btn-danger" ng-click="tabs[0].active = true">选中第2个</button>
<button class="btn btn-sm btn-default" ng-click="tabs[1].active = true">选中第3个</button>
<button class="btn btn-sm btn-default" ng-click="tabs[1].disabled = !tabs[1].disabled">开启/禁用第3个</button>
</p>
<hr>
<tabset>
<tab heading="html5">html5内容</tab>
<tab heading="{{tab.title}}" ng-repeat="tab in tabs" active="tab.active" disabled="tab.disabled">{{tab.content}}</tab>
<tab select="alertMe()">
<tab-heading> //heading。 标题文本或者html内容
<i class="glyphicon glyphicon-bell">弹出!</i>
</tab-heading>
html5jq-FE学习平台欢迎您！
</tab>
</tabset>
<hr>
<tabset vertical="true" type="pills"> // vertical 方式 默认为false为水平方向 反之。。。
<tab heading="第一列">第一列内容</tab>
<tab heading="第二列">第二列内容</tab>
</tabset>
</section>
</section>
</body>
js代码 ：
<script>
angular.module('myApp',['ui.bootstrap']).controller('tabDemo',function($scope,$window){ //我不想说了。。只要看过这一列系demo的都应该明白了
$scope.tabs = [
{title : 'jquery' ,content : '我是jquery内容'},
{title : 'angular' ,content : '我是angular内容'}
];
$scope.alertMe = function(){
$window.alert('html5jq-FE学习平台欢迎您!')
}
})
</script>
2016-06-26 · 百度知道合伙人官方认证企业
育知同创教育
用angular渲染bootstrap中的tab切换的
思路：先加载scope中的tabs，然后利用后台bootstrap渲染即可。
1、angularjs代码：
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'One',
url: 'one.tpl.html'
}, {
title: 'Two',
url: 'two.tpl.html'
}, {
title: 'Three',
url: 'three.tpl.html'
}];
$scope.currentTab = 'one.tpl.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
2、渲染效果：
