Set active tab style with AngularJS

by

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:

<li ng-class="{active: $route.current.activetab == 'dashboard'}"></li>
<li ng-class="{active: $route.current.activetab == 'lab'}"></li>

More Related Contents:

  1. How to pass parameters using ui-sref in ui-router to controller
  2. Way to ng-repeat defined number of times instead of repeating over array?
  3. How to set an iframe src attribute from a variable in AngularJS
  4. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  5. Losing scope when using ng-include
  6. AngularJS – Value attribute on an input text box is ignored when there is a ng-model used?
  7. AngularJS: No “Access-Control-Allow-Origin” header is present on the requested resource [duplicate]
  8. How to pass parameters using ui-sref in ui-router to the controller
  9. What is the correct syntax of ng-include?
  10. angularjs to output plain text instead of html
  11. AngularJS – ng-disabled not working for Anchor tag
  12. Image loaded event in for ng-src in AngularJS
  13. Template does not update when using ui-router and ion-tabs
  14. AngularJS: Better way to watch for height change
  15. How do I disable the save password bubble in chrome using Javascript?
  16. How to remove an item from an array in AngularJS scope?
  17. CSS: Change parent on focus of child
  18. Angularjs does not load scripts within ng-view
  19. In AngularJS, any inline javascript code that included in HTML templates doesn’t work
  20. Print a div using javascript in angularJS single page application
  21. Angular form validation ng-disabled not working
  22. Remove ‘All Files’ option from HTML file input
  23. angularjs custom filter to check for values inside a data array
  24. Webstorm: “Cannot Resolve Directory”
  25. angularjs form reset error
  26. AngularJs – Best-Practices on adding an active class on click (ng-repeat)
  27. How can I invoke encodeURIComponent from angularJS template?
  28. Clear localStorage on tab/browser close but not on refresh
  29. Rename Object Key in an array using javascript
  30. Decode HTML entity in Angular JS

Leave a Comment