JSFiddle - React, Tailwind, and code Playground

by Jairo Espinosa

HTML

<body ng-app="app">

<div ng-controller="PredictionCtrl as predictionCtrl">
  <table width="40%" border="1">
    <tbody>
      <tr>
        <td bgcolor="orange">A</td>
        <td bgcolor="yellow">B</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td bgcolor="pink">C</td>
        <td bgcolor="cyan">D</td>
      </tr>
    </tfoot>
  </table>
  <br>

  <table width="40%" border="1">
    <tbody>
      <tr rpt-my-directive-a p="1" q="2"></tr>
    </tbody>
    <tfoot>
      <tr rpt-my-directive-b r="3" s="4"></tr>
    </tfoot>
  </table>
  
  <br/>
  
  <table width="40%" border="1">
    <tbody>
      <tr rpt-my-directive-a p="1" q="2"></tr>
      <tr rpt-my-directive-b r="3" s="4"></tr>
    </tbody>
  </table>
</div>

  
</body>

JavaScript

angular
  .module('app', [])
  .controller('PredictionCtrl', [PredictionCtrl])
  .directive('rptMyDirectiveA', rptMyDirectiveA)
  .directive('rptMyDirectiveB', rptMyDirectiveB)

function PredictionCtrl() {
  var predictionCtrl = this;
}

function rptMyDirectiveA() {
  return {
    'replace': true,
    'restrict': 'A',
    'template': "<tr><td bgcolor='orange'>E</td><td bgcolor='yellow'>F</td></tr>"
  };
}

function rptMyDirectiveB() {
  return {
  	'replace':true,
    'restrict': 'A',
    'template': "<tr><td bgcolor='pink'>G</td><td bgcolor='cyan'>H</td></tr>"
  };
}