angularjs - ng-class - [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 11 of the expression

Football-Is-My-Life picture Football-Is-My-Life · Aug 8, 2014 · Viewed 31.1k times · Source

I am using the following code for "ng-class" :

 <i class="fa" ng-class="fa-sort-up:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='asc',
                               fa-sort-down:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='desc',
                               fa-sort:tableService.sortState.sortBy!=id"></i>

How do I fix this error :

Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 11 of the expression [fa-sort-up:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='asc',
fa-sort-down:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='desc',
fa-sort:tableService.sortState.sortBy!=id] starting at [:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='asc',
fa-sort-down:tableService.sortState.sortBy==id && tableService.sortState.sortMode=='desc',
fa-sort:tableService.sortState.sortBy!=id]

Answer

az7ar picture az7ar · Aug 8, 2014

ng-class works like this :

<i class="fa" ng-class='{"fa-sortup" : x && y, "fa-b": a && b}'></i>

So, you are missing the curly braces.

p.s. You have to put the class name inside a string "fa-sortup" if they contain special characters like '-'.