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!
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.
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.
$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.