This snippet shows my problem nicely:
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?
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/
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/
$indexwithinng-repeatfiltered or sorted items, is not the original array index. For example if filter takes 10 items and cuts them in half, new$indexeswill be0-4regardless of what original array indexes are.$indexwill be index of new filtered or sorted array used internally by angular