In AngularJS how to get the new index of an array element after sorting?

Question

This snippet shows my problem nicely:

JSfiddle - sorting table

Important parts:

<tr ng-repeat="result in results | orderBy:predicate" ng-class="classRow($index)">

$scope.classRow = function(i) {
    return $scope.results[i].size > 9000 ? 'highlight' : '';
}

As you can see, the index always goes from 0 to 6 even when re-sorting the array, so the highlight doesn't move with the item.

How can I get the highlight to stick to the item it's originally at?

Answer 1

You could also do this inline, so there's no need for controller code:

ng-class="{ highlight: result.size > 9000 }"

Working example: http://jsfiddle.net/wEBnX/2/

Answer 2

Rather than working off of an index, pass in the size property directly to classRow().

<tr ng-repeat="result in results | orderBy:predicate" ng-class="classRow(result.size)">

$scope.classRow = function(size) {
    return size > 9000 ? 'highlight' : '';
}

Working example: http://jsfiddle.net/WqbNS/