JSFiddle - React, Tailwind, and code Playground

by Anik Islam Abhi

HTML

<div ng-app="app" ng-controller="myCtrl">
  <table>
    <tbody empty-tbody>
      <tr ng-if="isCreating()">
        <td>
          <input ng-model="creatingItem.Name" />
        </td>
      </tr>
      <tr ng-repeat="item in model.entries">
        <td>
          <input ng-model="item.Name" />
        </td>
      </tr>
    </tbody>
  </table>
  <button ng-click="clear()">
    Clear
  </button>
   <button ng-click="load()">
    load
  </button>
</div>

JavaScript

var app = angular.module("app", []);
app.directive('emptyTbody', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.$watch(function() {
        return element.find('tr').length;
      }, function(nv) {
         if(nv){
           console.log("Table has data")
         }
         else
           console.log("Table has no data");
      });

    }
  }
});
app.controller("myCtrl", function($scope) {
  $scope.model = {};
  $scope.creatingItem = {};
  $scope.model.entries = [{
    name: 'anik'
  }];
  $scope.isCreating = function() {
    return $scope.model.entries.length > 0;
  }
  $scope.clear = function() {
    $scope.model.entries.length = 0;
  }
  $scope.load = function() {
    $scope.model.entries = [{
      name: 'anik'
    }];
  }
});