JSFiddle - React, Tailwind, and code Playground

by peterbenoit

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<div ng-app ng-controller="myCtrl">
    <p> Angular 1.2+</p>
    <p>ng-class="{even: $even, odd: $odd}"</p>
    <table>
        <tr ng-repeat="row in rowList" ng-class="{even: $even, odd: $odd}">
            <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
        </tr>
    </table>
    <hr />
    <p>Using ng-class-even / ng-class-odd</p>
    <table>
        <tr ng-repeat="row in rowList" ng-class-odd="'odd'"  ng-class-even="'even'">
            <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
        </tr>
    </table>
    <hr />
    <p>if you have angular &lt; 1.2</p>
    <p>ng-class="{even: !($index%2), odd: ($index%2)}"</p>
    <table>
        <tr ng-repeat="row in rowList" ng-class="{even: !($index%2), odd: ($index%2)}">
            <td ng-repeat="col in colList">{{printCell(row,col)}}</td>
        </tr>
    </table>
</div>

CSS

.even{
    background-color: #f0c;
}
.odd{
    background-color: #0f3;
}
table{
    border-collapse: collapse;
    border-spacing: 0;
}

JavaScript

function myCtrl($scope) {
    $scope.rowList = [1,2,3,4,5];
    $scope.colList = [1,2,3];
    $scope.printCell = function(row,col){
        return row + " - " + col;
    }
}