Collection-repeat alternating colours doesn't work


#1

If using ng-repeat, I can apply a css class which makes the row colours alternate.

However, when using collection-repeat, this css class breaks and the rows no longer alternate. They are fine to begin with but then when scrolling occurs, the colours are not showing correctly.

i.e
ng-repeat --> 1,2,1,2,1,2,1,2
collection-repeat --> 1,2,1,1,1,2,1,2,2

Is there any fix for this so the css can re-apply itself correctly? If not I will just have to stick to all white rows haha


#2

Hi, I have encountered this issue as well, did you find anything to fix this? @mbrookson
I have tried with css nth-child which was messed up and with angularjs ng-class-odd and even, which works after a few scrolls, but when it first renders there are no styles applied.

The best solution I have found so far is using css nth-child selectors AND the ng-class-odd and even which have !important added next to the background color. (not the best practice, you can also apply this style differently to avoid !important)

So what this does is on first display, when for some reason the ng-class-odd, etc. is not yet applied the nth-child selectors take over and the coloring is correct, and when you start scrolling the ng-class-odd takes over.

If anyone has a better idea, I’m all ears :slight_smile:


#3

I never put the time in to find a solution for this so just went back to all one colour.

Sounds like your solution works alright though. Would be good if this was fixed for real though!

@mhartington