Angular UI選項卡-單獨的選項卡內容和選項卡標題

Question

我在嘗試使用uib-tabset插件時遇到問題，確定該插件正常工作，但是我需要在特定的東西上使用它。 問題：如何將選項卡標題與選項卡內容分開。

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) { $scope.setActiveTab = function(index){ $scope.activeTab = index; } }); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div ng-app="ui.bootstrap.demo"> <div ng-controller="TabsDemoCtrl"> <div class="some-tabs-header-holder"> <uib-tabset active="active" vertical="false" > <uib-tab index="0" heading="Tab 1"><!-- not needed tab 1 content--></uib-tab> <uib-tab index="1" heading="Tab 2"><!-- not needed tab 2 content--></uib-tab> </uib-tabset> <div> <div class="the-tabs-content-holder"> <div id="tab1" class="tab1-content">tab 1 content</div> <div id="tab2" class="tab2-content">tab 2 content</div> </div> </div> </div> 

選擇標簽時，我只需要顯示“ the-tabs-content-holder” div中的內容

Answer 1

您可以通過為每個選項卡附加select事件處理程序並使用ng-if指令來執行此操作，以便根據$scope.activeTab的值顯示tab內容

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) { $scope.activeTab=1; $scope.setActiveTab = function(index){ $scope.activeTab = index; } }); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div ng-app="ui.bootstrap.demo"> <div ng-controller="TabsDemoCtrl"> <div class="some-tabs-header-holder"> <uib-tabset active="active" vertical="false" > <uib-tab select="setActiveTab(1)" index="0" heading="Tab 1"><!-- not needed tab 1 content--></uib-tab> <uib-tab select="setActiveTab(2)" index="1" heading="Tab 2"><!-- not needed tab 2 content--></uib-tab> </uib-tabset> <div> <div class="the-tabs-content-holder"> <div id="tab1" ng-if="activeTab==1" class="tab1-content">tab 1 content</div> <div id="tab2" ng-if="activeTab==2" class="tab2-content">tab 2 content</div> </div> </div> </div> 

Answer 2

• 使用ng-click="setActiveTab(0)"設置所選標簽的index 。
• 使用ng-if根據$scope.activeTab值顯示選項卡內容div

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window) { $scope.activeTab = 0; $scope.setActiveTab = function(index) { $scope.activeTab = index; } }); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div ng-app="ui.bootstrap.demo"> <div ng-controller="TabsDemoCtrl"> <div class="some-tabs-header-holder"> <uib-tabset active="active" vertical="false"> <uib-tab index="0" heading="Tab 1" ng-click="setActiveTab(0)"> <!-- not needed tab 1 content--> </uib-tab> <uib-tab index="1" heading="Tab 2" ng-click="setActiveTab(1)"> <!-- not needed tab 2 content--> </uib-tab> </uib-tabset> <div> <div class="the-tabs-content-holder"> <div id="tab1" class="tab1-content" ng-if="activeTab == 0">tab 1 content</div> <div id="tab2" class="tab2-content" ng-if="activeTab == 1">tab 2 content</div> </div> </div> </div>