How to set bootstrap active tab on refresh in Angular JS - angularjs

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?

Answer 1

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.

Answer 2

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'}">Tab3</li>
<li ng-class ="{active:selTab=='tab3'}">Tab3</li>
</ul>

Answer 3

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.

Answer 4

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);
}

Answer 5

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);
}
}