Search code examples
angularjsng-class

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

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

Solution

  • 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