JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div ng-app="myApp">
<div ng-controller="MyCtrl">
  <table>
  <thead>
    <tr>
      <th>field 1</th>
      <th>field 2</th>
      <th>field 3</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items">
      <td><input class="form-control" ng-model="item.field1" /></td>
      <td><input class="form-control" ng-model="item.field2" /></td>
      <td><input class="form-control" ng-model="item.field3" /></td>
    </tr>
  </tbody>
  </table>
  <br />
  <button class="btn btn-primary" type="button" ng-click="add()">
    Добавить
  </button><br />
  {{items}}


<form name="form" ng-model="f">
  <input class="form-control" name="email" type="email" required ng-model="f.email"
  ng-model-options="{updateOn: 'change'}"/>
  {{form}}
</form>

</div>
</div>

JavaScript

var myApp = angular.module('myApp', []);



var MyCtrl = myApp.controller('MyCtrl', function MyCtrl($scope) {
    var emptyItem = function () {
      return {field1:"", field2:"", field3:""};
    }
    
    $scope.f = {
    
    }
    
    $scope.items = [
      {field1:"1.1", field2:"1.2", field3:"1.3"},
      {field1:"2.1", field2:"2.2", field3:"2.3"}
    ]
    
    $scope.add = function () {
      $scope.items.push(emptyItem());
    }
});