Grid Example With Angular 1.4

HTML

<div ng-app="myApp" ng-controller="ResourceController">
    <fieldset >
            <h3>Add Resources</h3>
            <span >Description:</span>
            <input type="text" ng-model="newres.ResourceDescription" style="width:200px;" />
            <span > URL:</span>
            <input type="text" ng-model="newres.ResourceAddress" style="width:340px;"  />
            <a class="btn"  href="#" ng-click="AddResource(newres)">Add</a><br/>
           


            <h3>List of Resources</h3>
            <table   cellpadding="0" cellspacing="0">
                <tbody>
                <tr>
                    <th>Description</th>
                    <th>URL</th>
                    <th></th>
                </tr>
                <tr ng-repeat="res in resources">
                    <td><input style="width:200px;" type="text" ng-model="res.ResourceDescription" /></td>
                    <td><input style="width:440px;" type="text" ng-model="res.ResourceAddress" /></td>
                    <td><a class="btn"  ng-click="RemoveResource($index)">Remove</a></td>
                </tr>
                </tbody>
            </table>
            
             <a class="btn" href="#" ng-click="ShowRes()">Show</a>



    </fieldset>

</div>

CSS

body
{
  font-family:Arial;
  color:#3a3a3a;
}
table
{
  border:none;
  text-align:left;
  margin-bottom:20px;
}
tr th
{
      background-color: #3b97d3;
    color: #fff;
    padding: 5px;
    border-right: solid 1px #3b97d3;
    border-left: solid 1px #fff;
}
tr th:first-child
{
  border-left: solid 1px #3b97d3;
}
tr td
{
  padding:5px;
   padding: 5px;
    border-right: solid 1px #d4d4d4;
}
tr td:first-child
{
  border-left: solid 1px #d4d4d4;
}
table tr:last-child td
{
  border-bottom: solid 1px #d4d4d4;
}
input[type="text"]
{
  height:20px;
  font-size:14px;
}
a.btn
{
  color:#fff;
  background-color:#3b97d3;
  padding:0px 10px;
   height:26px;
   display:inline-block;
    line-height:26px;
  text-decoration:none;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  cursor:pointer;
}
a.btn:hover
{
  background-color:#73c7ff;
}

JavaScript

var app = angular.module("myApp", []);
app.controller("ResourceController", function($scope) {


    $scope.resources = [{'ResourceAddress': 'http://www.discoversdk.com', 'ResourceDescription':'Great site'}];


    $scope.RemoveResource = function (index) {
        $scope.resources.splice(index, 1);
    }

        $scope.AddResource = function (newres) {
            if ($scope.resources == null) {
                $scope.resources = {};
                $scope.resources = []1;
            }

            $scope.resources.push(
                {
                    ResourceAddress: newres.ResourceAddress,
                    ResourceDescription: newres.ResourceDescription,
                });

            newres.ResourceAddress = "";
            newres.ResourceDescription = "";
        }

        $scope.ShowRes = function () {
            alert(JSON.stringify($scope.resources));
        }

});