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, Nov 05 '15 at 11:47
Is there any console error? Did you ng-app and ng-controller — hurricane, Nov 05 '15 at 11:47
for me it's working [plunker](http://plnkr.co/edit/ptaUCXdnA8nR9x8IrOcx?p=preview) — AntiHeadshot, Nov 05 '15 at 11:56

score 2 · Answer 1 · answered Nov 05 '15 at 11:53

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 05 '15 at 11:53

vp_arth

14,461
4
37
66

So, i should use like this ? `
{{className}}
` ? – Biz Dev B Nov 05 '15 at 12:09
No, `class="{{className}}"` or `ng-class="className"`. Look for other error in your code/devConsole. That part is correct. – vp_arth Nov 05 '15 at 12:12
i noted that even `alert('a');` is not triggering for me . – Biz Dev B Nov 05 '15 at 12:13
Check it in the original fiddle: https://jsfiddle.net/geonunez/pWG2S/ If it not works - issue with your browser. – vp_arth Nov 05 '15 at 12:20
Aha, your `latest chrome` can be infected by anything, that inject some code for example... Are you check `if part` of my comment above? – vp_arth Nov 05 '15 at 12:22
Ahm,, the fiddle is working good, so it should run inside the application too right... – Biz Dev B Nov 05 '15 at 12:24

Alexander Elgin · Accepted Answer · 2015-11-05T12:14:01.337

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 05 '15 at 12:14

answered Nov 05 '15 at 12:10

Alexander Elgin

6,796
4
40
50

1

Recheck it now. I've made a snippet – Alexander Elgin Nov 05 '15 at 12:14
The issue was fixed after fiving `myCtrl` ! – Biz Dev B Nov 05 '15 at 12:27

ng-class not working in angularjs

2 Answers2