JSFiddle - React, Tailwind, and code Playground

by Nicolas Lips

HTML

<div ng-app="myApp" ng-controller="MainController as main">

  <table border="1">
    <tr>
      <th>Entities</th>
      <th>View1 Items</th>
      <th>View2 Items</th>
    </tr>
    <tr ng-repeat="entity in main.entities track by $index">
      <td>
        {{entity}}
      </td>
      <td>
        <span ng-if="main.view1Items.length &gt; $index">{{main.view1Items[$index]}}</span>
        <span ng-if="main.view1Items.length &gt;= $index" style="background-color:red">NO ITEM</span>
      </td>
      <td>
        <span ng-if="main.view2Items.length &gt; $index">{{main.view2Items[$index]}}</span>
        <span ng-if="main.view2Items.length &gt;= $index" style="background-color:red">NO ITEM</span>
      </td>
    </tr>
  </table>

<hr/>
  <form ng-controller="NewItemController as newItem" ng-submit="newItem.add()">
    <p>
    
    <label>Entity name: <input ng-model="newItem.name"/></label></p>
    <p>
    
    
    <label>View1 item option: <input ng-model="newItem.view1ItemOption"/></label>
    </p>
    <p>
    
    
    <label>View2 item option: <input ng-model="newItem.view2ItemOption"/></label>
    </p>
    <p>
    <input ng-disable="!newItem.busy" type="submit" value="Add"/>
    </p>
  </form>

</div>

JavaScript

angular
.module("myApp", [])
.controller("MainController", [function() {
	this.entities = [];
  this.view1Items = [];
  this.view2Items = [];
}])
.controller("NewItemController", ["$scope", "$timeout", function($scope, $timeout) {
	var vm = this;
  vm.busy = false;
	vm.add = function() {
  	if (!vm.busy) {
    	vm.busy = true;
      var name = vm.name;
      $timeout(function () {
	  		$scope.main.entities.push(name);
        $scope.main.view1Items.push("");
      }, 1000);
    }
  }
}])