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

Question

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 1

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 '-'.

Answer 2

When your classes have the "-" character you must wrap them with '', and if you have more than one condition, make it an array, just like this:

<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>

Answer 3

For me, and in Visual Studio Tools for Apache Cordova, I resolved the error by adding a ';' at the end. So :ng-class="{class : expression};"