AngularJS orderBy messes up materialize striped class

Question

I am making a table in an angular page with ng-repeat and using materlize's 'striped' class:

table.striped>tbody>tr:nth-child(odd) {
    background-color: #f2f2f2
}

It works fine if I don't order the ng-repeat, but if I add orderBy in the ng repeat (orderBy: 'Student.firstName') the only the first row and last row come out white and the rest of the table is shaded. I also tried ordering the array in the controller using

$scope.questionScores = _.orderBy $scope.questionScores, 'Student.firstName' 

and using

$scope.questionScores = $filter('orderBy')($scope.questionScores, 'Student.firstName') 

but both cause the same error, hiw can I order the results without messing up the css?

Answer 1

Can you show me what the data in questionScores look like?

I was trying out your scenario in plunker and I see the stripes coming out as expected.

https://plnkr.co/edit/ilh6grH2tERRglfhIipp

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $filter) {
    $scope.questionScores = [
    {'name' : 'z'},
    {'name' : 'b'},
    {'name' : 'x'},
    {'name' : 'c'},
    {'name' : 'd'},
    {'name' : 'a'},
    {'name' : 'n'},
    {'name' : 'f'}
];

$scope.questionScores = $filter('orderBy')($scope.questionScores, 'name') 
});