CODEWITHSUNDEEP
javascriptangularjstwitter-bootstraptabs
user3684675
user3684675

Reputation: 381

tab data to be displayed in individual tabs

I'm working on angular bootstrap tabs. I want to show different content in each tab when user navigates through the tabs. I could not able to show the content in individual tabs. Please find the demo here

js code:

var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {
          $rootScope.tabName ='MyTab Name';

    $rootScope.tabValue="tab1Value";
    $scope.applicationData = {};
    $scope.activeModule = "tab1Value";
    $scope.programModules=[{"tabName":"Tab1","tabValue":"tab1Value"},{"tabName":"Tab2","tabValue":"tab2Value"}];
    $scope.loadApplicationData = function(tabVal,tabName){
        $rootScope.tabName =tabName;
     alert("$rootScope.tabName :: "+$rootScope.tabName);
        $rootScope.tabValue=tabVal;
        $scope.activeModule = tabVal;

    }; 
    $scope.loadApplicationData($scope.activeModule,'Tab1');


});

html code:

<div ng-controller="tabsctrl">
 <div class="top-tabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist" >
            <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
                <a href="javascript:void(0)"  ng-click="loadApplicationData(pg.tabValue,pg.tabName)" >{{pg.tabName}}</a>
            </li>
        </ul>

         <div class="tab-content">
          <!--Tab1 data div-->
            <div role="tabpanel" class="tab-pane active" id="tab1">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                 Tab1 data
                            </div>This should be shown when user click tab1
                            </div>
                            </div><div></div>
              <!--Tab2 data div-->
              <div role="tabpanel" class="tab-pane active" id="tab2">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                 Tab2 data
                            </div>This should be shown when user click tab2
                            </div>
                            </div><div></div>  </div>
                            </div></div>

When user click on tab1, tab1 div should be shown, similarly when user click on Tab2, tab2 data should be displayed and Tab2 should be selected.Any suggestions would be helpful.

Upvotes: 0

Views: 928

Answers (3)

krakkun
krakkun

Reputation: 1

It looks like you are trying to display some tab buttons to switch out content based on the selected tab. I'm not sure if you are trying to only show the content of the selected tab or some content of all tabs and extra content of the selected one, so I've provided an example of both.

Plunker example

function controller($scope){
    $scope.tabs = [
        {name: 'Tab 1', value1: 'Tab 1 value 1', value2: 'Tab 1 value 2'},
        {name: 'Tab 2', value1: 'Tab 2 value 1', value2: 'Tab 2 value 2'},
    ];
    $scope.selectedTab = $scope.tabs[0];

    $scope.selectTab = function(tab){
        $scope.selectedTab = tab;
    };
}

Html example 1

<div ng-repeat="tab in tabs"
     ng-click="selectTab(tab)"
     ng-class="{'selected': tab == selectedTab}">
    {{tab.name}}
</div>
<div class="tab-content">
    {{selectedTab.value1}}
</div>

Html example 2

<div ng-repeat="tab in tabs"
     ng-click="selectTab(tab)"
     ng-class="{'selected': tab == selectedTab}">
    {{tab.name}}
</div>
<div ng-repeat="tab in tabs">
  {{tab.value1}}
  <div ng-if="tab === selectedTab">
    {{tab.value2}}
  </div>
</div>

Obviously you can style and build this up however you like. You shouldn't need anything special to achieve what you want.

I recommend you don't use $rootScope, I'm not sure what you are achieving with it here. I also recommend you use directives or components where possible instead of attaching 'ng-controller' to arbitrary bits of html.

Upvotes: 0

sudo
sudo

Reputation: 323

A quick way to do what you are asking would be to use ng-include. See plunker example

var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {

    $scope.tabs = [
      {"tabName":"Tab1","tabValue":"tab1Value","templateURL":"tab1.html"},
      {"tabName":"Tab2","tabValue":"tab2Value","templateURL":"tab2.html"}
    ];

});

<div ng-app="tabs">

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

  <div ng-controller="tabsctrl">
    <uib-tabset>
      <uib-tab ng-repeat="tab in tabs" heading="{{tab.tabName}}" active="tab.active" disable="tab.disabled">
        <div ng-include="tab.templateURL"></div>
      </uib-tab>
    </uib-tabset>
  </div>
</div>

Upvotes: 1

Nainish Modi
Nainish Modi

Reputation: 488

This how u can achieve it i have updated your html as there were lots of end div tag missing and i have just add conditions as per your code style

<div ng-app="tabs">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<div ng-controller="tabsctrl">
    <div class="top-tabs">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
                <a href="javascript:void(0)" ng-click="loadApplicationData(pg.tabValue,pg.tabName)">{{pg.tabName}}</a>
            </li>
        </ul>

        <div class="tab-content">
            <div ng-if="tabName === 'Tab1'" role="tabpanel" class="tab-pane active" id="tab1">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                Tab1 data
                            </div>This should be shown when user click tab1
                        </div>
                    </div>
                </div>
            </div>

            <div ng-if="tabName === 'Tab2'" role="tabpanel" class="tab-pane active" id="tab2">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                Tab2 data
                            </div>This should be shown when user click tab2
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Related Questions