How to assign alternate class to rows in Angular JS?

In this post i would like to write about Angular JS ngClassOdd,ngClassEven directives , by using this directories we can take effect only on odd rows or on even rows.

This directives work exactly as ngClass and this directives only work when they are in scope of an ngRepeat.

For example by using ngClassOdd,ngClassEven directives we gonna add alternate row colors in table.

First create css, for applying different color to each type, blow is the css.

Angular Table :

In the above script :
The ng-app directive initializes an AngularJS application.
The ng-init directive initialize application data.
The ng-repeat directive clones HTML elements once for each item in an array or in an object.
The ng-class-odd directive effect only the odd rows in the ng-repeat clone.
The ng-class-even directive effect only the even rows in the ng-repeat clone.

Complete Example

That’s it , to see the demo click on below demo link.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

I am Arjun from Hyderabad (India). I have been working as a PHP Developer from last 6+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.