AngularJS: How do I show a different class for every 'even' for in an ng-repeat?
I was populating an html table and needed to apply the css class 'even' to every second line.
The solution was pretty simple using some angular goodness.
My html for the tr was as follows:
<tr ng-repeat="data in MyDataCollection" ng-class="IsEven($index) ? 'even' : '' ">
<td>{{data.Col1}}</td>
<td>{{data.Col2}</td>
</tr>
The variable $index gives you the current index (row) for the collection. You can pass it to a (simple) function to return whether the row is even or not.
My function looked as follows:
$scope.IsEven = function(index){ return (index % 2 != 0); };
The solution was pretty simple using some angular goodness.
My html for the tr was as follows:
<tr ng-repeat="data in MyDataCollection" ng-class="IsEven($index) ? 'even' : '' ">
<td>{{data.Col1}}</td>
<td>{{data.Col2}</td>
</tr>
The variable $index gives you the current index (row) for the collection. You can pass it to a (simple) function to return whether the row is even or not.
My function looked as follows:
$scope.IsEven = function(index){ return (index % 2 != 0); };
Comments
Post a Comment