How to set bootstrap active tab on refresh in Angular JS

Question

I am creating tabs as:

 <tabset class="content-tabset no-margin">
<tab ng-repeat="t in t.values" heading="{{t.name}}" active="t.active">
  //other stuff
</tab>
</tabset>

Now within this other stuff I also have button which when clicks updates the row and refreshes that part. When the refresh happens it also resets the tab I am currently on. So if I am tab two and click on the button, the panel refreshes and I come back on tab 1. How can I prevent this?

Can you post the code that is called when the button is pressed? — Jonathan Smith
– Jonathan Smith, Commented Apr 28, 2015 at 7:50
@Jonny sorry the code is long so I cant post the code here. I am calling angular.extend that refreshes my different items that are bind on my page. — aman
– aman, Commented Apr 28, 2015 at 8:26

Rene Korss · Accepted Answer · 2015-04-29 06:32:41Z

5

Use localStorage. Set it on selecting tab. To get boolean value of active state for current tab use ng-init.

<tabset class="content-tabset no-margin">
  <tab 
    ng-repeat="t in t.values" 
    heading="{{t.name}}" 
    ng-init="isActive = isActiveTab(t.name, $index)"
    active="isActive"
    select="setActiveTab(t.name)">
    //other stuff
  </tab>
</tabset>

And in your controller

$scope.setActiveTab = function( activeTab ){
    localStorage.setItem("activeTab", activeTab);
};

$scope.getActiveTab = function(){
    return localStorage.getItem("activeTab");
};

$scope.isActiveTab = function( tabName, index ){
    var activeTab = $scope.getActiveTab();
    return ( activeTab === tabName || ( activeTab === null && $index === 0 ) );
};

NOTE: Since your t has no unique ID for tabs, names should be unique to detect active tab correctly.

See example JSFiddle.

edited Apr 29, 2015 at 6:32

answered Apr 28, 2015 at 8:02

Rene Korss

5,4943 gold badges33 silver badges39 bronze badges

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

Comments

Pikesh Prasoon · Accepted Answer · 2017-07-19 07:20:00Z

Whenever you do a refresh the local/scope variables runs out of scope. So the way out to solve this is using JavaScript's Session Storage/ Local Storage.

Session storage will run out of scope once you close the browser while local storage will persist value till window and browser lifetimes.

Inside controller:

$scope.selTab = sessionStorage.tabName; //On refresh it will fetch value from session storage

$scope.onClickTab = function(tabName){ //On click it will set the sessionStorage
    $scope.selTab = tabName;
    sessionStorage.tabName = tabName;
}

Inside HTML must refer your controller

<ul class="nav nav-pills col-md-12 col-sm-12 col-xs-12{{active}}">
  <li ng-class ="{active:selTab=='tab1'}"><a href="#/tab1" ng-click="onClickTab('tab1')">Tab3</a></li>
  <li ng-class ="{active:selTab=='tab3'}"><a href="#/tab3" ng-click="onClickTab('tab3')">Tab3</a></li>
</ul>

Srinivas · Accepted Answer · 2018-03-20 10:00:59Z

0

You can use this package ui-router-tabs. Follow the link https://github.com/rpocklin/ui-router-tabs. Easy to use and gets the job done.

answered Mar 20, 2018 at 10:00

Srinivas

91912 silver badges14 bronze badges

Comments

Aman Verma · Accepted Answer · 2018-05-01 09:18:08Z

I have solved it by using Local Storage

Inside HTML:

            <ul class="nav">
                <li>
                    <a ng-click="goToManageUsers('manageUser')" ng-class="{'active': selectedTab == 'manageUser'}">
                        <i class="lnr lnr-home"></i>
                        <span>Manage User</span>
                    </a>
                </li>
                <li>
                    <a ng-click="goToManageRequest('manageImage')" ng-class="{'active': selectedTab == 'manageImage'}">
                        <i class="lnr lnr-home"></i>
                        <span>Manage Image</span>
                    </a>
                </li>
            </ul>

Inside Controller:

$scope.selectedTab = localStorage.getItem('getActive');
$scope.goToManageUsers = function (user) {
    $scope.selectedTab = user;
    localStorage.setItem('getActive', user);

}
$scope.goToManageRequest = function (image) {
    $scope.selectedTab = image;
    localStorage.setItem('getActive', image);
}

Mark · Accepted Answer · 2019-01-29 19:58:08Z

0

To do this same thing in Angular 2+, you also use LocalStorage. Something like this (I used ng-bootstrap to enable Bootstrap tabs):

HTML:

<ngb-tabset class="nav-fill" (tabChange)="tabChange($event)" [activeId]="activeTabId">
    <ngb-tab title="Tab 1" id="tab1">
        ...
    </ngb-tab>
    <ngb-tab title="Tab 2" id="tab2">
        ...
    </ngb-tab>
</ngb-tabset>

.ts:

import {NgbTabChangeEvent} from "@ng-bootstrap/ng-bootstrap";
... other imports

export class MyComponent {

    activeTabId: string;

    constructor() {
        this.activeTabId = localStorage.getItem("activeTab");
    }

    tabChange($event: NgbTabChangeEvent) {
        localStorage.setItem("activeTab", $event.nextId);
    }
}

answered Jan 29, 2019 at 19:58

Mark

5,7228 gold badges54 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to set bootstrap active tab on refresh in Angular JS

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related