apply ngClass to element where ngRepeat is declared

Question

I have a table where rows are generated using AngularJS ngRpeat:

<tr ng-repeat="player in division"> <td>{{player.name}}</td> <td>{{player.score}}</td> </tr>

The array looks a bit like this:

$scope.divison = [ { name: "John Doe", score: "10", goingUp : true }, { name: "Bob Marley", score: "20" } ];

Now, what if I wanted to apply ng-class to the table row based on that particular ng-repeat? I would have though this might work:

<tr ng-repeat="player in division" ng-class="'goingUp' : player.goingUp"> <td>{{player.name}}</td> <td>{{player.score}}</td> </tr>

Alas this doesn't work. Probably because the ng-class doesn't sit inside that repeat element. How can I get this working though?

@Second2None thanks, I was just missing those brackets. If you would like to post that as an answer I will accept it as the correct syntax and easiest method. — CaribouCode
– CaribouCode, Commented Oct 16, 2014 at 13:22
It is a bug. github.com/angular/angular.js/issues/2368 It is unclear if the fix is in the current release version. — JC Ford
– JC Ford, Commented Oct 16, 2014 at 13:29

Second2None · Accepted Answer · 2014-10-16 13:24:24Z

1

Correct syntax is

ng-class="{'goingUp' : player.goingUp}"

answered Oct 16, 2014 at 13:24

4722 gold badges8 silver badges22 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:27:21Z

It should be able to do so like in this case. You could write a function in to your controllers scope that returns appropriate class:

$scope.isGoingUp = function(player) { if (player.goingUp) return "goingUp"; return "notGoingUp"; }

and then call it like this

ng-class="isGoingUp(player)"

Thanks for your answer. Whilst this method may work, simply adding brackets worked for me and was easier.