ng-class not working in angularjs

Question

I want to change the class name of div using angularjs (app.js) I followed this answer but the class name is not changing in my view.

Here is my view

<div ng-class="class">{{class}}</div>
<button ng-click="changeClass()">Change Class</button>

Here is my app.js

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);

app.controller("myApp", function ($scope) {
    $scope.class = "red";
    $scope.changeClass = function () {
        alert('a');
        if ($scope.class === "red")
            $scope.class = "blue";
        else
            $scope.class = "red";
    };
});
app.config(['$routeProvider',
        function ($routeProvider) {
            $routeProvider.
            when('/', {
                    title: 'Dashboard',
                    templateUrl: 'views/dashboard.html',
                    controller: 'authCtrl',
                    role: '0'
                })
                .otherwise({
                    redirectTo: '/login'
                });
        }
    ])
    .run(function ($rootScope, $location, Data) {
        $rootScope.$on("$routeChangeStart", function (event, next, current) {
            var nextUrl = next.$$route.originalPath;
            if (localStorage.getItem("serviceUserId") === null) {
                $location.path("/login");
            } else {

                if (nextUrl == '/') {
                    $location.path("/dashboard");
                }
            }
        });
    });

What is the mistake i am doing and how can i fix it ?

Try ng-class="{red: isRed, blue: isBlue}" and $scope.isRed=!$scope.isRed; $scope.isBlue=!$scope.isRed; in your changeClass — vp_arth
– vp_arth, Commented Nov 5, 2015 at 11:47
Is there any console error? Did you ng-app and ng-controller — hurricane
– hurricane, Commented Nov 5, 2015 at 11:47

vp_arth · Accepted Answer · 2015-11-05 11:53:39Z

2

Note: Your code works for me w/o any modifications.

Following should work also:

<div ng-class="{red: className === 'red', blue: className === 'blue'}">{{className}}</div>

Also, you can make it simpler with class="{{className}}"

I use className everywhere, because class is js-reserved word.
Some minifiers will fail with it, for example.

answered Nov 5, 2015 at 11:53

vp_arth

15k4 gold badges43 silver badges72 bronze badges

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

6 Comments

Biz Dev B Over a year ago

So, i should use like this ? <div ng-class="{{class}}">{{className}}</div> ?

vp_arth Over a year ago

No, class="{{className}}" or ng-class="className". Look for other error in your code/devConsole. That part is correct.

Biz Dev B Over a year ago

i noted that even alert('a'); is not triggering for me .

vp_arth Over a year ago

Check it in the original fiddle: jsfiddle.net/geonunez/pWG2S If it not works - issue with your browser.

vp_arth Over a year ago

Aha, your latest chrome can be infected by anything, that inject some code for example... Are you check if part of my comment above?

|

Alexander Elgin · Accepted Answer · 2015-11-05 12:14:01Z

1

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

app.controller("myCtrl", function ($scope) {
    $scope.className = "red";
    $scope.changeClass = function () {
        alert('a');
        if ($scope.className === "red")
            $scope.className = "blue";
        else
            $scope.className = "red";
    };
});

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.red, .blue {
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div class="{{className}}">{{className}}</div>
    <button ng-click="changeClass()">Change Class</button>
  </div>
</div>

edited Nov 5, 2015 at 12:14

answered Nov 5, 2015 at 12:10

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

2 Comments

Alexander Elgin Over a year ago

Recheck it now. I've made a snippet

Biz Dev B Over a year ago

The issue was fixed after fiving myCtrl !

Collectives™ on Stack Overflow

ng-class not working in angularjs

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related