ng-class doesn't do what a simple css class does

Question

I was expecting ng-class to at least do what a simple class does i.e. apply a css property. In the plunker example, if the replace ng-class with class, it works and I get the indent. i.e. ng-class="indentLeft" doesn't work but class="indentLeft" does. What am I missing ?

See a simple plunker here: http://plnkr.co/edit/moLu0BmgEYVm3xFQDcw8?p=preview

If class is what you need, then why do you need ng-class — Lucius
– Lucius, Commented Apr 19, 2014 at 4:44
I actually need to do further complicated stuff with ng-class, but if I'm stumbling at the first step, it is not very pleasant. I've reduced my problem to this simple question. — Kaya Toast
– Kaya Toast, Commented Apr 19, 2014 at 4:52

Mark Coleman · Accepted Answer · 2014-04-19 04:59:48Z

3

ngClass requires an expression to evaluate.

ng-class="{'indentLeft' : (item == true)}"

The json structure is property name in '' is the class you want to apply and that property value detracted if it should be applied via true/false

String Expression

When you do this, ng-class="indentLeft" angularjs doesn't know that it is a string and most likely is trying to evaluate it from the scope.

If you wrap the property in '' and make it a string literal the plunker should work correctly

ng-class="\'indentLeft\'"

Updated plnkr

edited Apr 19, 2014 at 4:59

answered Apr 19, 2014 at 4:42

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kaya Toast Over a year ago

Pls. elaborate why you think it needs an expression. The documentation says that one of the 3 ways it operates is "If the expression evaluates to a string, the string should be one or more space-delimited class names." I mean, isn't ng-class="indentLeft" an adequate expression in itself ?

Mark Coleman Over a year ago

It is not since indentLeft most likely being treated as a unknown scope property. If you do 'indentLeft' now it is a string and angular works correctly

Collectives™ on Stack Overflow

ng-class doesn't do what a simple css class does

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related