How to assign class to an element using $scope variable in angular js

Question

I have a class

.haba-haba{
border:1px solid red;
height:50%;
width:50%;
}

I am storing the class name in scope variable in my controller using

$scope.className = "haba-haba";

How can I assign $scope.className to my div as a class?

I tried doing <div ng-class="'{{className:true}}'"></div> It didn't work.

Anyone can tell me a solution? thanks in advance!

Answer 1

The syntax for the ngClass directive is this:

ng-class="{'haba-haba': thruthValue}"

where

$scope.thruthValue = true;

You can obviously replace true with false or a function that returns true or false.

Another usage is this:

ng-class="getTheClass()"

where

$scope.getTheClass = function() {
    return 'haba-haba';
}

Here's a working fiddle of the second usage.

Also, as other people have pointed out, the second usage is totally against sane MVC. Don't use it unless you know what you are doing.

Answer 2

Actually, what you should do with ng-class is create a boolean variable and attach it to the ng-class attribute - when this boolean is true - the div has that class:

$scope.toggleClass = false;

ng-class="{'haba-haba' : toggleClass}"

Now when you set toggleClass to true - your div gets haba-haba added.