current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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!

share|improve this question
    
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 Feb 28 at 13:41

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
    
It's not working @Sergiu Paraschiv –  Mayur Naikwadi Feb 28 at 13:19
    
Could you please post your code? What's not working? Does it throw any exceptions? Check your dev console. –  Sergiu Paraschiv Feb 28 at 13:20
    
problem is that this function is not called. –  Mayur Naikwadi Feb 28 at 13:23
    
@SergiuParaschiv is that a valid code? 'ng-class="getTheClass()"' ?? –  Aditya Ponkshe Feb 28 at 13:23
    
Yes it is. Here it is running: jsfiddle.net/24sqQ/1 –  Sergiu Paraschiv Feb 28 at 13:29
up vote -1 down vote

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.

share|improve this answer
    
This can not be the answer. –  Aditya Ponkshe Feb 28 at 13:16
    
@AdityaPonkshe -- Care to explain? –  tymeJV Feb 28 at 13:27
    
@tymeJY OP wants to use value stored in scope, to use as a class, not by setting flags –  Aditya Ponkshe Feb 28 at 13:28
1  
@AdityaPonkshe -- Not a very smart way to do it IMO - the point of markup like ng-class is to know exactly what is happening in the view in a clean way. Having your class name stored in a variable and using said variable in the markup creates confusion. –  tymeJV Feb 28 at 13:30
    
that maybe true but if OP wants to do it his way we should provide exact solution, you can still provide alternate solution but should mention why, in the answer, like u did in a comment –  Aditya Ponkshe Feb 28 at 13:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.