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!

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!

• javascript
• css
• angularjs
• ng-class

• I don't think that storing $scope.className = "haba-haba"; is a good idea. Which class to use is view's concern, not model's concern. You should hard-code the classes in view and based on the conditions to apply classes accordingly. – Khanh TO Commented Feb 28, 2014 at 13:41

2 Answers 2

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.

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.