Angular UI Tab - separate tab-content and tab-header

Question

I faced with a problem during try to use uib-tabset plugin, Ok that plugin working correctly, but i need use it in specific thing. Question: How can I separate Tabs header from the tab content.

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>

I just need to displayed content from "the-tabs-content-holder" div when tab selected

Mihai Alexandru-Ionut · Accepted Answer · 2017-10-13 08:58:14Z

4

You can do it by attaching select event handler for every tab and use ng-if directive in order to show the tab content based on the value of $scope.activeTab

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>

edited Oct 13, 2017 at 8:58

answered Oct 13, 2017 at 8:51

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sajal Over a year ago

Well, you made use of select attribute which is native to uib-tab. So +1 for that :)

Victor Orletchi Over a year ago

this same like above answer but with using select attribute, please read my comment there!

Sajal · Accepted Answer · 2017-10-13 08:51:04Z

1

Set the index of the selected tab using ng-click="setActiveTab(0)".
Show the tab content div based on value of $scope.activeTab using ng-if

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>

answered Oct 13, 2017 at 8:51

Sajal

4,4111 gold badge22 silver badges41 bronze badges

3 Comments

Mihai Alexandru-Ionut Over a year ago

We thought in the same way :) +1 for your answer.

Victor Orletchi Over a year ago

yes, we can do that, but i interested to do with plugin features. means like in bootstrap tabs when you add data-toggle="tab" and data-target="#id_of_element"

Mihai Alexandru-Ionut Over a year ago

I don't think that's possible.

Collectives™ on Stack Overflow

Angular UI Tab - separate tab-content and tab-header

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related