Search code examples
javascriptcssangularjsng-class

Pass a class name in AngularJS with ng-class

I have:

<tr ng-class="{{line.color}}" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
    <td>{{$index + 1}}</td>
    <td>{{line.username}}</td>
    <td>{{line.games}}</td>
    <td>{{line.winners}}</td>
</tr>

When I open debugger I see:

<tr class="ng-scope" ng-class="BLUE" ng-repeat="line in gameRank | orderBy: sortType: sortReverse">
    <td class="ng-binding">1</td>
    <td class="ng-binding">Admin</td>
    <td class="ng-binding">0</td>
    <td class="ng-binding">0</td>
</tr>

So, my class BLUE is not applied to my element.

How can I fix it?

Solution

  • It should be 

    <tr ng-class="line.color" ...>

    Instead of

    <tr ng-class="{{line.color}}" ...>

    JSFiddle demo