Set active tab style with AngularJS

Question

I have routes set in AngularJS like this    routeProvider      when   dashboard    templateUrl  partials dashboard   controller widgetsController        when   lab    templateUrl  partials lab   controller widgetsController     I have some links on the topbar styled as tabs  How can I add  active  class to a tab depending on current template or url

User · Answer

If you re using ngRoute  for routing  then your application will have below configuration   angular    module  appApp          ngRoute      config function   routeProvider         routeProvider        when                templateUrl   views main html           controller   MainCtrl           controllerAs   main                  when   about             templateUrl   views about html           controller   AboutCtrl           controllerAs   about                   Now  just add a controller in this configuration just like below   angular        module  appApp              ngRoute              config function   routeProvider             routeProvider            when                    templateUrl   views main html               controller   MainCtrl               activetab   main                          when   about                 templateUrl   views about html               controller   AboutCtrl               activetab   about                               controller  navController   function   scope   route         scope  route    route          As you ve mentioned active tab in your configuration  now you just have to add active class in your  lt li gt  or  lt a gt  tag  Like   ng-class   active   route current activetab     about      Which means  whenever user click on about page  this will automatically identify the current tab and apply active css class   I hope this helps

User · Answer

Simplest solution here   How to set bootstrap navbar active class with Angular JS   Which is   Use ng-controller to run a single controller outside of the ng-view    lt div class  collapse navbar-collapse  ng-controller  HeaderController  gt       lt ul class  nav navbar-nav  gt           lt li ng-class    active  isActive        gt  lt a href     gt Home lt  a gt  lt  li gt           lt li ng-class    active  isActive   dogs     gt  lt a href   dogs  gt Dogs lt  a gt  lt  li gt           lt li ng-class    active  isActive   cats     gt  lt a href   cats  gt Cats lt  a gt  lt  li gt       lt  ul gt   lt  div gt   lt div ng-view gt  lt  div gt    and include in controllers js   function HeaderController  scope   location           scope isActive   function  viewLocation             return viewLocation      location path

User · Answer

One way of doing this would be by using ngClass directive and the  location service  In your template you could do   ng-class   active isActive   dashboard       where isActive would be a function in a scope defined like this   myApp controller  MyCtrl   function  scope   location         scope isActive   function route            return route      location path                Here is the complete jsFiddle  http   jsfiddle net pkozlowski opensource KzAfG   Repeating ng-class   active isActive   dashboard     on each navigation tab might be tedious  if you ve got many tabs  so this logic might be a candidate for a very simple directive

User · Answer

Bootstrap example   If you are using Angulars built in routing  ngview  this directive can be used   angular module  myApp   directive  classOnActiveLink    function         return           link  function scope  element  attrs                 var anchorLink   element children   0  getAttribute  ng-href      element children   0  getAttribute  href                anchorLink   anchorLink replace                         scope  on   routeChangeSuccess   function  event  current                    if  current   route originalPath    anchorLink                        element addClass attrs classOnActiveLink                                     else                       element removeClass attrs classOnActiveLink                                                              Assuming your markup looks like this        lt ul class  nav navbar-nav  gt           lt li class-on-active-link  active  gt  lt a href   orders  gt Orders lt  a gt  lt  li gt           lt li class-on-active-link  active  gt  lt a href   distributors  gt Distributors lt  a gt  lt  li gt       lt  ul gt    I like this was of doing it since you can set the class name you want in your attribute

User · Answer

I needed a solution that doesn t require changes to controllers  because for some pages we only render templates and there s no controller at all  Thanks to previous commenters who suggested using  routeChangeSuccess I came up with something like this     Directive angular module  myapp directives    directive  ActiveTab     route  - gt    restrict   A     link   scope  element  attrs  - gt      klass    active       if  route current activeTab  and attrs flActiveLink is  route current activeTab       element addClass klass       scope  on   routeChangeSuccess    event  current  - gt        if current activeTab  and attrs flActiveLink is current activeTab         element addClass klass        else         element removeClass klass     Routing  routeProvider  when   page     templateUrl   page html    activeTab   page   when   other page     templateUrl   other page html    controller   OtherPageCtrl    activeTab   other page     View   jade  a ng-href   page   active-tab  page   Page a ng-href   other page   active-tab  other page   Other page   It doesn t depend on URLs and thus it s really easy to set it up for any sub pages etc

User · Answer

A way to solve this without having to rely on URLs is to add a custom attribute to every partial during  routeProvider configuration  like this     routeProvider      when   dashboard             templateUrl   partials dashboard html           controller  widgetsController          activetab   dashboard              when   lab             templateUrl   partials lab html           controller  widgetsController          activetab   lab            Expose  route in your controller   function widgetsController  scope   route         scope  route    route      Set the active class based on the current active tab    lt li ng-class   active   route current activetab     dashboard    gt  lt  li gt   lt li ng-class   active   route current activetab     lab    gt  lt  li gt

User · Answer

Came here for solution     though above solutions are working fine but found them little bit complex unnecessary  For people who still looking for a easy and neat solution  it will do the task perfectly    lt section ng-init  tab 1  gt                   lt ul class  nav nav-tabs  gt                       lt li ng-class   active  tab    1   gt  lt a ng-click  tab 1  href   showitem  gt View Inventory lt  a gt  lt  li gt                       lt li ng-class   active  tab    2   gt  lt a ng-click  tab 2  href   additem  gt Add new item lt  a gt  lt  li gt                       lt li ng-class   active  tab    3   gt  lt a ng-click  tab 3  href   solditem  gt Sold item lt  a gt  lt  li gt                   lt  ul gt               lt  section gt

User · Answer

Maybe a directive like this is might solve your problem  http   jsfiddle net p3ZMR 4   HTML   lt div ng-app  link  gt   lt a href    one  active-link  active  gt One lt  a gt   lt a href    two  active-link  active  gt One lt  a gt   lt a href     active-link  active  gt home lt  a gt     lt  div gt    JS  angular module  link        directive  activeLink      location   function location        return           restrict   A           link  function scope  element  attrs  controller                var clazz   attrs activeLink              var path   attrs href              path   path substring 1     hack because path does bot return including hashbang             scope location   location              scope  watch  location path     function newPath                    if  path     newPath                        element addClass clazz                     else                       element removeClass clazz

User · Answer

rob-juurlink I improved a bit on your solution   instead of each route needing an active tab  and needing to set the active tab in each controller I do this   var App   angular module  App       App config    routeProvider   function  routeProvider      routeProvider    when   dashboard         templateUrl   partials dashboard html       controller  Ctrl1         when   lab         templateUrl   partials lab html       controller  Ctrl2           run    rootScope     location   function  rootScope   location      var path   function     return  location path          rootScope  watch path  function newVal  oldVal         rootScope activetab   newVal                And the HTML looks like this  The activetab is just the url that relates to that route  This just removes the need to add code in each controller  dragging in dependencies like  route and  rootScope if this is the only reason they re used    lt ul gt       lt li ng-class   active  activetab    dashboard    gt          lt a href    dashboard  gt dashboard lt  a gt       lt  li gt       lt li ng-class   active  activetab    lab    gt          lt a href    lab  gt lab lt  a gt       lt  li gt   lt  ul gt

User · Answer

an alternative way is to use ui-sref-active    A directive working alongside ui-sref to add classes to an element when the related ui-sref directive s state is active  and removing them when it is inactive  The primary use-case is to simplify the special appearance of navigation menus relying on ui-sref  by having the  active  state s menu button appear different  distinguishing it from the inactive menu items   Usage   ui-sref-active  class1 class2 class3  - classes  class1    class2   and  class3  are each added to the directive element when the related ui-sref s state is active  and removed when it is inactive   Example  Given the following template    lt ul gt     lt li ui-sref-active  active  class  item  gt       lt a href ui-sref  app user  user   bilbobaggins     gt  bilbobaggins lt  a gt     lt  li gt     lt  --     -- gt   lt  ul gt    when the app state is  app user   and contains the state parameter  user  with value  bilbobaggins   the resulting HTML will appear as   lt ul gt     lt li ui-sref-active  active  class  item active  gt       lt a ui-sref  app user  user   bilbobaggins     href   users bilbobaggins  gt  bilbobaggins lt  a gt     lt  li gt     lt  --     -- gt   lt  ul gt    The class name is interpolated once during the directives link time  any further changes to the interpolated value are ignored   Multiple classes may be specified in a space-separated format   Use ui-sref-opts directive to pass options to  state go    Example    lt a ui-sref  home  ui-sref-opts   reload  true   gt Home lt  a gt

User · Answer

use strict    angular module  cloudApp      controller  MenuController   function   scope   location  CloudAuth         scope menu                      title    Dashboard            iconClass    fa fa-dashboard            link     dashboard            active   true                           title    Devices            iconClass    fa fa-star            link     devices                            title    Settings            iconClass    fa fa-gears            link     settings                      location path   dashboard         scope isLoggedIn   CloudAuth isLoggedIn       scope isAdmin   CloudAuth isAdmin       scope isActive   function route          return route      location path                   And use the below in the template    lt li role  presentation  ng-class   active isActive menuItem link    ng-repeat  menuItem in menu  gt  lt a href    menuItem link    gt  lt i class    menuItem iconClass    gt  lt  i gt  amp nbsp  amp nbsp   menuItem title   lt  a gt  lt  li gt

User · Answer

I found XMLilley s anwser the best and most adaptable and non-intrusive   However I had a small glitch   For use with bootstrap nav  here is how I modified it   app directive  activeTab   function   location        return         link  function postLink scope  element  attrs            scope  on   routeChangeSuccess   function  event  current  previous                    designed for full re-usability at any path  any level  by using                  data from attrs                 declare like this   lt li class  nav tab  gt  lt a href    home                                      active-tab  1  gt HOME lt  a gt  lt  li gt                              if attrs href  undefined     this directive is called twice for some reason                    this var grabs the tab-level off the attribute  or defaults to 1                 var pathLevel   attrs activeTab    1                     this var finds what the path is at the level specified                     pathToCheck    location path   split      pathLevel                      this var finds grabs the same level of the href attribute                     tabLink   attrs href split      pathLevel                      now compare the two                  if  pathToCheck     tabLink                      element parent   addClass  active     parent to get the  lt li gt                                    else                     element parent   removeClass  active                                                                       I added  if attrs href  undefined   because this function is apprently called twice  the second time producing an error   As for the html    lt ul class  nav nav-tabs  gt      lt li class  active  active-tab  1  gt  lt a href    accueil  active-tab  1  gt Accueil lt  a gt  lt  li gt      lt li gt  lt a active-tab  1  href    news  gt News lt  a gt  lt  li gt      lt li gt  lt a active-tab  1  href    photos   gt Photos lt  a gt  lt  li gt      lt li gt  lt a active-tab  1  href    contact  gt Contact lt  a gt  lt  li gt   lt  ul gt

User · Answer

I agree with Rob s post about having a custom attribute in the controller  Apparently I don t have enough rep to comment  Here s the jsfiddle that was requested   sample html   lt div ng-controller  MyCtrl  gt       lt ul gt           lt li ng-repeat  link in links  ng-class   active   route current activeNav    link type   gt   lt a href    link uri    gt   link name   lt  a gt            lt  li gt       lt  ul gt   lt  div gt    sample app js  angular module  MyApp       config    routeProvider   function   routeProvider         routeProvider when   a             activeNav   a                  when   a  id             activeNav   a                  when   b             activeNav   b                  when   c             activeNav   c                   controller  MyCtrl   function   scope   route         scope  route    route       scope links              uri     a           name   A           type   a                   uri     b           name   B           type   b                   uri     c           name   C           type   c                   uri     a detail           name   A Detail           type   a                http   jsfiddle net HrdR6

User · Answer

Here s another version of XMLillies w  domi s LI change that uses a search string instead of a path level  I think this is a little more obvious what s happening for my use case   statsApp directive  activeTab   function   location      return       link  function postLink scope  element  attrs          scope  on   routeChangeSuccess   function  event  current  previous            if  attrs href  undefined       this directive is called twice for some reason              The activeTab attribute should contain a path search string to match on               I e   lt li gt  lt a href    nested section1 partial  activeTab   section1  gt First Partial lt  a gt  lt  li gt            if   location path   indexOf attrs activeTab   gt   0                element parent   addClass  active     parent to get the  lt li gt              else               element parent   removeClass  active                                                     HTML now looks like    lt ul class  nav nav-tabs  gt     lt li gt  lt a href    news  active-tab   news  gt News lt  a gt  lt  li gt     lt li gt  lt a href    some nested photos rawr  active-tab   photos  gt Photos lt  a gt  lt  li gt     lt li gt  lt a href    contact  active-tab   contact  gt Contact lt  a gt  lt  li gt   lt  ul gt

User · Answer

You can also simply inject the location into the scope and use that to deduct the style for the navigation   function IndexController   scope   rootScope   location        rootScope location    location            Then use it in your ng-class    lt li ng-class   active  location path        search    gt     lt a href   search  gt Search gt  lt a  gt   lt  li gt

User · Answer

Following Pavel s advice to use a custom directive  here s a version that requires adding no payload to the routeConfig  is super declarative  and can be adapted to react to any level of the path  by simply changing which slice   of it you re paying attention to    app directive  detectActiveTab   function   location        return         link  function postLink scope  element  attrs            scope  on   routeChangeSuccess   function  event  current  previous                                     Designed for full re-usability at any path  any level  by using                  data from attrs  Declare like this                    lt li class  nav tab  gt                     lt a href    home  detect-active-tab  1  gt HOME lt  a gt                   lt  li gt                                  This var grabs the tab-level off the attribute  or defaults to 1             var pathLevel   attrs detectActiveTab    1                 This var finds what the path is at the level specified                 pathToCheck    location path   split      pathLevel                         current  location path doesn t reach this level                  This var finds grabs the same level of the href attribute                 tabLink   attrs href split      pathLevel                         href doesn t include this level                  Above  we use the logical  or  operator to provide a default value                in cases where  undefined  would otherwise be returned                 This prevents cases where undefined   undefined                  possibly causing multiple tabs to be  active                   now compare the two              if  pathToCheck     tabLink                  element addClass  active                              else                 element removeClass  active                                                     We re accomplishing our goals by listening for the  routeChangeSuccess event  rather than by placing a  watch on the path  I labor under the belief that this means the logic should run less often  as I think watches fire on each  digest cycle    Invoke it by passing your path-level argument on the directive declaration  This specifies what chunk of the current  location path   you want to match your href attribute against    lt li class  nav tab  gt  lt a href    home  detect-active-tab  1  gt HOME lt  a gt  lt  li gt    So  if your tabs should react to the base-level of the path  make the argument  1   Thus  when location path   is   home   it will match against the    home  in the href  If you have tabs that should react to the second level  or third  or 11th of the path  adjust accordingly  This slicing from 1 or greater will bypass the nefarious     in the href  which will live at index 0    The only requirement is that you invoke on an  lt a gt   as the element is assuming the presence of an href attribute  which it will compare to the current path  However  you could adapt fairly easily to read write a parent or child element  if you preferred to invoke on the  lt li gt  or something  I dig this because you can re-use it in many contexts by simply varying the pathLevel argument  If the depth to read from was assumed in the logic  you d need multiple versions of the directive to use with multiple parts of the navigation      EDIT 3 18 14  The solution was inadequately generalized  and would activate if you defined an arg for the value of  activeTab  that returned undefined against both  location path    and the element s href  Because  undefined     undefined  Updated to fix that condition    While working on that  I realized there should have been a version you can just declare on a parent element  with a template structure like this    lt nav id  header tabs  find-active-tab  1  gt       lt a href    home  class  nav tab  gt HOME lt  a gt       lt a href    finance  class  nav tab  gt Finance lt  a gt       lt a href    hr  class  nav tab  gt Human Resources lt  a gt       lt a href    quarterly  class  nav tab  gt Quarterly lt  a gt   lt  nav gt    Note that this version no longer remotely resembles Bootstrap-style HTML  But  it s more modern and uses fewer elements  so I m partial to it  This version of the directive  plus the original  are now available on Github as a drop-in module you can just declare as a dependency  I d be happy to Bower-ize them  if anybody actually uses them   Also  if you want a bootstrap-compatible version that includes  lt li gt  s  you can go with the  angular-ui-bootstrap Tabs module  which I think came out after this original post  and which is perhaps even more declarative than this one  It s less concise for basic stuff  but provides you with some additional options  like disabled tabs and declarative events that fire on activate and deactivate

User · Answer

I can t remember where I found this method  but it s pretty simple and works well   HTML    lt nav role  navigation  gt       lt ul gt           lt li ui-sref-active  selected  class  inactive  gt  lt a ui-sref  tab-01  gt Tab 01 lt  a gt  lt  li gt            lt li ui-sref-active  selected  class  inactive  gt  lt a ui-sref  tab-02  gt Tab 02 lt  a gt  lt  li gt       lt  ul gt   lt  nav gt    CSS      selected       background-color   white      color   light-blue      text-decoration  none      border-color   light-grey

User · Answer

I recommend using the state ui module which not only support multiple and nested views but also make this kind of work very easy  code below quoted      lt ul class  nav  gt       lt li ng-class    active   state includes  contacts      gt  lt a href      state href  contacts      gt Contacts lt  a gt  lt  li gt       lt li ng-class    active   state includes  about      gt  lt a href      state href  about      gt About lt  a gt  lt  li gt   lt  ul gt    Worth reading

[javascript] Set active tab style with AngularJS

Examples related to javascript

Examples related to html

Examples related to angularjs