UI Bootstrap tabs save active tabs after reload

Question

I need to show active tab after page reload. I found that I need to store active tab name to session or local storage. But for me this not working. Here is html

<uib-tabset>
     <uib-tab active="active" ng-init="isActive = isActiveTab('Info', $index)" index="0" data-toggle="tab" href="#sectionInfo" 
     heading="Info" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
     <uib-tab active="active" ng-init="isActive = isActiveTab('Info 2',$index)" index="1" data-toggle="tab" href="#sectionInfoTwo" 
     heading="Info 2" classes="tabovi" select="setActiveTab('Info')"></uib-tab>
</uib-tabset>

And here is controller

// Save active tab to localStorage
$scope.setActiveTab = function (activeTab) {
    sessionStorage.setItem("activeTab", activeTab);
};

// Get active tab from localStorage
$scope.getActiveTab = function () {
    return sessionStorage.getItem("activeTab");
};

// Check if current tab is active
$scope.isActiveTab = function (tabName, index) {
    var activeTab = $scope.getActiveTab();
    return (activeTab === tabName || (activeTab === null && index === 0));
};

Thank you

Nitin Kothwal · Accepted Answer · 2018-03-07T14:08:55.000

2

You need to store index rather than its name. Refer following code snippet:

HTML:

<uib-tabset active="active">
    <uib-tab index="0" data-toggle="tab" heading="Info" select="setActiveTab(0)" classes="tabovi"></uib-tab>
    <uib-tab index="1" data-toggle="tab" heading="Software config" select="setActiveTab(1)"></uib-tab>
    <uib-tab index="2" data-toggle="tab" heading="Hardware config" select="setActiveTab(2)"></uib-tab>
    <uib-tab index="3" data-toggle="tab" heading="Config" select="setActiveTab(3)"></uib-tab>
</uib-tabset>

Javascript:

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

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

// This will set last tab active automatically when page loaded
$scope.active = parseInt($scope.getActiveTab());

edited Mar 07 '18 at 14:08

answered Mar 07 '18 at 12:09

Nitin Kothwal

156
9

after page reload, they return me to activeTab = 0 . When I click on tab they store index in session storage, but after refresh always return to 0 – Arter Mar 07 '18 at 12:16
What is the value you get in `$scope.active` variable after page reload? Is it returning correct value? – Nitin Kothwal Mar 07 '18 at 13:08
Remove `active="active"` attributes from both tabs and see whether it works. – Nitin Kothwal Mar 07 '18 at 13:18
take a look http://plnkr.co/edit/mx8hPEnPG86icw6zXK69?p=preview open session storage – Arter Mar 07 '18 at 13:23
You need two changes there. First, `` and `$scope.active = parseInt($scope.getActiveTab());` – Nitin Kothwal Mar 07 '18 at 14:06
I am updating my answer accordingly. – Nitin Kothwal Mar 07 '18 at 14:06
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166436/discussion-between-nitin-kothwal-and-arter). – Nitin Kothwal Mar 08 '18 at 05:23
Thank you @Nitin Kothwal. Now working. :) Working fix is this 'parseInt'. – Arter Mar 08 '18 at 06:56

UI Bootstrap tabs save active tabs after reload

1 Answers1