<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="tableCtrl as vm">
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>State</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in vm.records">
<td>
<input type="text" name="name"
class="form-control"
ng-model="record.name" />
</td>
<td><input type="text" name="city"
class="form-control"
ng-model="record.city" /></td>
<td>
<input type="text" name="state"
class="form-control"
ng-model="record.state" />
</td>
<td class="text-center">
<i class="fa fa-times-circle fa-lg text-danger"
ng-if="!$first"
ng-click="vm.remove($index)"
title="Delete" aria-hidden="true"></i>
<i class="fa fa-plus-circle fa-lg text-success"
ng-if="$last"
ng-click="vm.add()"
title="Add" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(function(){
var app = angular.module("myApp", []);
app.controller("tableCtrl", function(){
var vm = this;
vm.records = [
{name: 'John Smith', city:'Manhattan', state: 'NY'},
{name: 'Maria Rodriguez', city:'Brooklyn', state: 'NY'},
{name: 'Michael Garcia', city:'Queens', state: 'NY'}
]
vm.add = function(){
vm.records.push({name: '', city:'', state: ''});
}
vm.remove = function(index){
vm.records.splice(index, 1);
}
})
})();
/* Styles go here */