How to set active boot tab when upgrading in Angular JS

Question

I create 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 in this other case, I also have a button that, when clicked, updates the line and updates this part. When the update occurs, it will also reset the tab in which I am currently enabled. Therefore, if I am on tab two and press the button, the panel is updated, and I return to tab 1. How can I prevent this?

Answer 1

Use localStorage. Set it when you select a tab. To get the logical value of the active state for the 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 ) );
};

. t , .

. JSFiddle.

Answer 2

, , / . , - JavaScript / .

, , .

:

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

HTML

<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>

Answer 3

ui-router-tabs. https://github.com/rpocklin/ui-router-tabs. .

Answer 4

I solved it 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 the 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 the same 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);
    }
}