set current tab as active tab using Angularjs

Question

I have set of five tabs and they are working properly. When i refresh the page,currently active tab will get shifted to default state. But I want to set it for current active state, even after I refresh. Please let me know where I am going wrong

Html code:

    <div class="container">
    <section ng-app="myApp" ng-controller="TabController as tab">
       <ul class="nav nav-pills">
            <li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Home</a></li>
            <li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Underwriting</a></li>
            <li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Operations</a></li>
        </ul>

        <div ng-show="tab.isSet(1)">
             <h4>Home</h4>
        </div>
        <div ng-show="tab.isSet(2)">
             <h4>Underwriting</h4>
        </div>
        <div ng-show="tab.isSet(3)">
             <h4>Operations</h4>
        </div>
    </section>
</div>

Js:

    (function () {
    var app = angular.module('myApp', []);

    app.controller('TabController', function () {
        this.tab = 1;  ---> Here I am failing to apply the logic.

        this.setTab = function (tabId) {
            this.tab = tabId;
        };

        this.isSet = function (tabId) {
            return this.tab === tabId;
        };
    });
})();

working demo : http://jsfiddle.net/fwoxdjsu/

You need to store active tab somewhere(like local storage/ server). On page refresh read the tab data and set it. — Durga
– Durga, Commented Jan 3, 2018 at 10:57
Use web storage developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API And check for storage if value is set previously — neetesh
– neetesh, Commented Jan 3, 2018 at 10:58
localstorage is working bu it is bad way.for this purpose you can use angular router or ui-router — Aref Zamani
– Aref Zamani, Commented Jan 3, 2018 at 11:10

Durga · Accepted Answer · 2018-01-03 11:02:24Z

2

Store the tab index in localstorage and on page refresh set it again. As index comes in string from local storage convert to number.

this.tab = +localStorage.getItem('tabIndex') || 1;
this.setTab = function (tabId) {
  this.tab = tabId;
  localStorage.setItem('tabIndex', tabId);
};

Here is jsFiddle

answered Jan 3, 2018 at 11:02

Durga

15.6k2 gold badges31 silver badges55 bronze badges

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

Comments

Venka Tesh user5397700 · Accepted Answer · 2018-01-03 11:11:13Z

0

Updated Js

(function () {
    var app = angular.module('myApp', []);

    app.controller('TabController', function () {
        if(typeof(localStorage.currentTab)=="undefined")
            this.tab = 1;
        else 
            this.tab = parseInt(localStorage.currentTab);

        this.setTab = function (tabId) {
                localStorage.currentTab=tabId;
            this.tab = tabId;
        };
        this.isSet = function (tabId) {
            return this.tab === tabId;
        };
    });
})();

answered Jan 3, 2018 at 11:11

Venka Tesh user5397700

3593 silver badges18 bronze badges

Collectives™ on Stack Overflow

set current tab as active tab using Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related