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>