CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-route-segment
kiran gudla
kiran gudla

Reputation: 177

toggling class name based on route changes using angular-route

have 3 routes containing 3 forms Im trying to set bootstrap active class on current tab based on the current route in angular.I used angular route module. How can I achieve this. I m attaching the js code please check and help please

enter image description here

plnkr.co/edit/iTgNTJ74iLzlNx902qfP?p=preview

Upvotes: 1

Views: 305

Answers (1)

David Whitehurst
David Whitehurst

Reputation: 352

I used this.tab = 1 to default the tab where the class will be "active" first. Here's are my controller additions:

angular.module('ciwiseGenledgerApp')
  .controller('MainCtrl', function () {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];

    this.tab = 1;
    this.selectTab = function(setTab) {
    this.tab = setTab; 
    };
    this.isSelected = function(checkTab){
    return this.tab === checkTab;
    };
  });

I used ng-controller="MainCtrl as ctrl" in my page. Here's the snippet on the page.

          <div class="collapse navbar-collapse" id="js-navbar-collapse" ng-controller="MainCtrl as ctrl">

            <ul class="nav navbar-nav">
              <li ng-class="{ active: ctrl.isSelected(1) }"><a href="#/" ng-click="ctrl.selectTab(1)">Home</a></li>
              <li ng-class="{ active: ctrl.isSelected(2) }"><a ng-href="#/reports" ng-click="ctrl.selectTab(2)">Reports</a></li>
              <li ng-class="{ active: ctrl.isSelected(3) }"><a ng-href="#/admin" ng-click="ctrl.selectTab(3)">Admin</a></li>
              <li ng-class="{ active: ctrl.isSelected(4) }"><a ng-href="#/help" ng-click="ctrl.selectTab(4)">Help</a></li>
              <li ng-class="{ active: ctrl.isSelected(5) }"><a ng-href="#/about" ng-click="ctrl.selectTab(5)">About</a></li>
              <li ng-class="{ active: ctrl.isSelected(6) }"><a ng-href="#/contact" ng-click="ctrl.selectTab(6)">Contact</a></li>
            </ul>
          </div>

My active tab code is independent of the view routing. Here's my app.js. It has the routing code for my views.

angular
  .module('ciwiseGenledgerApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/contact', {
        templateUrl: 'views/contact.html',
        controller: 'ContactCtrl',
        controllerAs: 'contact'
      })
      .otherwise({
        redirectTo: '/'
      });
  });


  $.material.init();

Upvotes: 1

Related Questions