How to assign alternate class to rows in Angular JS?

Last updated on March 8, 2015

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.

.even {
 background-color: #ccc;
}
.odd {
 background-color: #333;
}

Angular Table :

                

                    
{{country}}
                
 

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

	
    



  

    
{{country}}
  

arjunphp.com

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