JSFiddle - React, Tailwind, and code Playground

by jeffersonswartz

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<div ng-app="myApp" ng-controller="myCtrl">

  <table class="table table-bordered" border="1" ng-repeat="each in table">
    <tr>
      <th><button type="button" class="btn btn-primary" ng-click="addRow($index)"><i class="glyphicon glyphicon-plus"></i>&nbsp;</button>
        <button type="button" class="btn btn-primary" ng-click="removeRow($index)"><i class="glyphicon glyphicon-minus"></i>&nbsp;</button>
      </th>
    </tr>
    <tr>
      <td>Passenger</td>
      <td>Count</td>
    </tr>
    <tr ng-repeat="row in each">
      <td ng-repeat="column in row">
        {{ column }}
      </td>
    </tr>
  </table>

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myArray = [{
    "Passenger": " gfdg",
    "Count": " hgf"
  }, ];

  $scope.table = [];

  if (!$scope.table.length) {
    $scope.table.push($scope.myArray);
  }

  $scope.addNewTable = function() {
    $scope.table.push($scope.myArray);
  }

  $scope.removeTable = function(index) {
    $scope.table.splice(index, 1);
  }
  $scope.addRow = function(index) {
    var myArr = {
      id: $scope.myArray.length + 1,
      employee_name: $scope.Passenger,
      employee_age: $scope.Count
    };
    $scope.table[index].push(myArr);
  }

  $scope.removeRow = function(index) {
    //Find the record using Index from Array.  
    $scope.myArray.splice(index, 1);
  }

});