Zebra-strip for tables using ng-repeat - html

Question

I am display large set of data content in table using ng-repeat and it contains only one <tr> element. I am trying to display odd row in one color and even row in another color. I am not getting how to display the striped color for single row by making use of ng-repeat. Please let me know where I am going wrong.
HTML:
<thead class="rowhead">
<tr>
<th class="mid">Sl.</th>
<th id="tnm">Name</th>
<th class="mid">Age</th>
<th class="mid">Members</th>
<th class="mid">View-content</th>
<th class="mid">on-going-Process</th>
</tr>
</thead>
<tbody ng-repeat="info in cspinfo">
<tr class="clr">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>

Answer 1

You can directly select the odd and even rows of table using the selector in css and apply style you need. You don't have to worry about the applying class to each row you create using ng-repeat.
tr:nth-child(odd){
background-color: #yourcolor
}
tr:nth-child(even){
background-color: #yourcolor
}
Here you can read more about css selectors https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anth-child

Answer 2

In your css define a rule for the style. Then in your html:
<tbody>
<tr class="clr" ng-class="{style-created: $index % 2 === 0}" ng-repeat="info in cspinfo">
<td>{{$index+1}}</td>
<td id="bnm">{{info.name}}</td>
<td>{{info.age}}</td>
<td>{{info.member}}</td>
<td>{{info.View-content}}</td>
<td>{{on-going-Process}}</td>
</tr>
</tbody>