Q:
How to put condition on ng-class in angularjs?
How to add condition in ng-class directive like ng-class="{'marginLeft': x>0}". Is there any way like below?
ng-class="[x>0 ? 'marginLeft': 'marginLeft']"
A:
You can use it like this: ng-class="{'marginLeft': x>0}".
Update: Here is one way to do it like you asked in comment:
text
angular.module('ngClassExample', [])
.controller('ClassController', ['$scope', function($scope) {
$scope.marginLeft = function(x) { return x>0 ? 'marginLeft' : ''; }
}])
.directive('ngClass', function() {
return {
restrict: 'A',
priority: -1, // this directive runs after the class directive
compile: function(tElm, tAttrs) {
var setter,
getter,
parse,
result;
parse = angular.element("").attr("class");
result = parse.split(/\s+/g);
getter = function() {
return result[parse.length - 1];
};
setter = function(value) {
var set = angular.isDefined(value) ? "addClass" : "removeClass";
result[parse.length - 1] = value;
return $parse(set)(tElm, getter);
};
return function ngClassBind(scope, element, attr) {
scope.$watch(getter, function ngClassWatchAction(value) {
setter(value);
});
};
}
};
});
Working Fiddle
I know this might not be the right answer for you but just for educational purposes, I hope you'll learn something.
A:
This is a possible solution that I found from this answer. Using a function that will return you the css class from inside the ng-class
Use it like this.
$scope.theFunctionThatReturnsClass = function (a) {
return a;
};
A:
You can try this:
In this example, invert should be true (boolean)
or
invert should be a string of space-delimited values for the keys to the class object (boolean/string/object)
or if you don't want to write ng-class twice:
In this example, invert is a field in the scope where ng-class is watching.
https://plnkr.co/edit/f5DjYq
See also:
https://github.com/angular/angular.js/issues/4652
Hope this helps.
UPDATE: For the sake of completeness, another solution is to use the expression option of the ngClass directive (which is not mentioned in the ngClass documentation but is in the parent docs):
DEMO: http://plnkr.co/edit/uP0E8Gz?p=preview
Also, as @sagarchalise noted in the comments, instead of using the inver option, you can directly write a class expression:
DEMO: http://plnkr.co/edit/v4Y3Jc?p=preview
