Efficiences of using ng-class-odd?

Question

Is it better to use

ul li:nth-child(odd){}
ul li:nth-child(even){}

instead of ng-class-odd and ng-class-even ?

i.e is it more efficient to use css than javascript for alternate coloration of rows in a "ul" list

My list has anywhere between 30-200 rows

Answer 1

TLDR: ng-class-odd/ng-class-even are nicer, albeit worse performing and give less specific control than CSS. If you can use ng-class-odd/ng-class-even, do.

On performance:

Raw CSS should always be faster than AngularJS' evaluation of an expression because the browser has to evaluate styles for elements as the DOM changes regardless. Evaluating ng-class-odd/ng-class-even attributes is extra computation to generate these computed attribute values.

In the real world:

ng-class-even and ul li:nth-child(odd){} are not exactly the same thing. ng-class-even is in terms of the ng-repeat but with the selector ng-class-even you can be independent of it - you can apply a more specific selector if you like. Want to not do this to the first item? You will need CSS.

This seems to be a trade off between elegance, performance and control.

Unless you are looking at thousands and thousands of rows, performance is a non-issue and you should write code that looks nice to people. Of course, I would love to see some hard statistics on performance differences here for this extreme use case!

For elegance but less control and less performance, don't tie your CSS to ng-repeat and use ng-class-even.

For performance and control (but less elegance), use CSS and not ng-class-even.