JSFiddle - React, Tailwind, and code Playground

by Joseph_Wang

HTML

<div ng-app="myApp" ng-controller='mainCtrl as ctrl'>
  <table>
    <th>value</th>
    <th>$index</th>
    <th>$first</th>
    <th>$last</th>
    <th>$middle</th>
    <th>$odd</th>
    <th>$even</th>
    <tr ng-repeat="data in ctrl.dataSet">
      <td>{{data}}</td>
      <td>{{$index}}</td>
      <td ng-class='{active:$first}'>{{$first}}</td>
      <td ng-class='{active:$last}'>{{$last}}</td>
      <td ng-class='{active:$middle}'>{{$middle}}</td>
      <td ng-class='{active:$odd}'>{{$odd}}</td>
      <td ng-class='{active:$even}'>{{$even}}</td>
    </tr>
</table>
</div>

CSS

.active{
      color:red;    
}

JavaScript

angular.module('myApp', [])
  .controller('mainCtrl', [function() {
    var self = this;
    self.dataSet = ['A', 'B', 'C', 'D', 'E'];
  }]);