Add class name dynamically using angular.js

Question

i need to add class name dynamically inside controller page when state will change using angular js.I did some coding but its working only after page refresh.I am explaining my code below.

dashboard.html:

<div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class={{home_active}} ><a ui-sref="dashboard">Home</a></li>
            <li class={{profile_active}} ><a ui-sref=".profile" >Profile</a></li>
            <li class={{dept_active}}><a ui-sref=".dept">Department</a></li>
            <li class={{pricipal_active}}><a ui-sref=".princpal">Princpal</a></li>
            <li class={{hod_active}}><a ui-sref=".dept_head">Dept. Head</a></li>
          </ul>
          </div><!--/.nav-collapse -->
      </div>
    </nav>

<!--main_heading_div-->
        <!--middle_content_details_data-->
        <div class="row" style="padding-top:120px;"  ui-view>

        </div>

loginRoute.js:

var Admin=angular.module('Channabasavashwara',['ui.router']);
Admin.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
     .state('/', {
            url: '/',
            templateUrl: 'dashboardview/login.html',
            controller: 'loginController'
        })
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: 'dashboardview/dashboard.html',
            controller: 'dashboardController'
        })
        .state('dashboard.profile', {
        url: '/profile',
        templateUrl: 'dashboardview/profile.html',
        controller: 'profileController'
    })
    .state('dashboard.dept', {
        url: '/dept',
        templateUrl: 'dashboardview/dept.html',
        controller: 'deptController'
    })
    .state('dashboard.princpal', {
        url: '/princpal',
        templateUrl: 'dashboardview/princpal.html',
        controller: 'princpalController'
    })
    .state('dashboard.dept_head', {
        url: '/dept_head',
        templateUrl: 'dashboardview/depthead.html',
        controller: 'deptheadController'
    })
    .state('home',{
        url: '/home',
        templateUrl: 'homeview/home.html',
        controller: 'homeController'
    })
    .state('home.course', {
        url: '/course',
        templateUrl: 'homeview/course.html',
        controller: 'coursecontroller'
    })
    .state('home.subject', {
        url: '/subject',
        templateUrl: 'homeview/subject.html',
        controller: 'subjectcontroller'
    })

dashboardController.js:

var dashboard=angular.module('Channabasavashwara');
dashboard.controller('dashboardController',function($scope,$http,$state){
    //$state.current='';
    if($state.current.url=="/dashboard"){
        $scope.profile_active="";
        $scope.home_active="active";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/profile"){
        $scope.profile_active="active";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/dept"){
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="active";
        $scope.pricipal_active="";
        $scope.hod_active="";
    }
    else if($state.current.url=="/princpal"){
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="active";
        $scope.hod_active="";
    }
    else{
        $scope.profile_active="";
        $scope.home_active="";
        $scope.dept_active="";
        $scope.pricipal_active="";
        $scope.hod_active="active";
    }
})

Here i am getting the class name but only after page reloading.I need when user will change the state according to that state the class name will add.Please help me.

plz add a plunk / jsfiddle.

Rabi
– Rabi

2015-10-09 07:40:57 +00:00
Commented Oct 9, 2015 at 7:40 — Rabi
– Rabi, Commented Oct 9, 2015 at 7:40

Frederik Kammer · Accepted Answer · 2015-10-09 07:48:09Z

1

It looks like you're using angular-ui-router. They have a build in directive called ui-sref-active. It adds a class to an element if the related ui-sref is active.

In your case you don't need all the code in your dashboardController.js. Just change your dashboard.html and add the ui-sref-active directive to the li elements:

dashboard.html:

<ul class="nav navbar-nav">
  <li ui-sref-active="active" ><a ui-sref="dashboard">Home</a></li>
  <li ui-sref-active="active" ><a ui-sref=".profile" >Profile</a></li>
  <li ui-sref-active="active"><a ui-sref=".dept">Department</a></li>
  <li ui-sref-active="active"><a ui-sref=".princpal">Princpal</a></li>
  <li ui-sref-active="active"><a ui-sref=".dept_head">Dept. Head</a></li>
</ul>

answered Oct 9, 2015 at 7:48

Frederik Kammer

3,1873 gold badges30 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Add class name dynamically using angular.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related