In this article I will explain with an example, how to make dynamic HTML Table i.e. an HTML Table which will dynamically allow adding and removing of HTML Table Rows using AngularJS.
This article will explain how to dynamically add / remove rows from HTML Table created using ng-repeat directive in AngularJS.
 
 
Dynamically Add / Remove Rows from HTML Table using AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML Table which will be populated from JSON array using ng-repeat directive.
Each row of the HTML Table consists of a Button which has been assigned ng-click directive. The $index variable is passed as parameter to the Remove function.
The Footer row of the HTML Table consists of two TextBoxes and a Button which has been assigned ng-click directive to call the Add function.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
Populating the HTML Table
An array of JSON objects is created and assigned to the Customers JSON array.
The ng-repeat directive as the name suggests repeats the element based on the length of the collection, in this scenario it will repeat the TR element (HTML Table Row).
The TBODY element of the HTML Table has been assigned ng-repeat directive in order to iterate through all the items of the Customers JSON array.
For each JSON object in the Customers JSON array, a TR element (HTML Table Row) is generated and appended into the HTML Table.
 
Dynamically adding Rows to the HTML Table on Button click
When the Add button is clicked, the Add function of the Controller gets called. Inside the Add function, a new JSON object is created and the values of the Name and Country TextBoxes are assigned to the respective Name and Country properties.
Finally the JSON object is added to the JSON array which ultimately re-populates the HTML Table.
 
Dynamically removing Rows from the HTML Table on Button click
When the Remove button is clicked, the Remove function of the Controller gets called. Inside the Remove function, the JSON object to be removed is determined using the Index value.
Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. For more details, please refer my article Get Row Index of HTML Table Row using AngularJS.
 
The Name value is fetched and it is used to display the JavaScript Confirmation Box.
Note: If you want to learn more on displaying JavaScript alert with AngularJS, please refer my article AngularJS: Display (Show) JavaScript Confirm Dialog box.
 
If the Confirmation response is TRUE then the JSON object is removed from the JSON array and the HTML Table is re-populated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Customers = [
                { Name: "John Hammond", Country: "United States" },
                { Name: "Mudassar Khan", Country: "India" },
                { Name: "Suzanne Mathews", Country: "France" },
                { Name: "Robert Schidner", Country: "Russia" }
                ];
 
            $scope.Add = function () {
                //Add the new item to the Array.
                var customer = {};
                customer.Name = $scope.Name;
                customer.Country = $scope.Country;
                $scope.Customers.push(customer);
 
                //Clear the TextBoxes.
                $scope.Name = "";
                $scope.Country = "";
            };
 
            $scope.Remove = function (index) {
                //Find the record using Index from Array.
                var name = $scope.Customers[index].Name;
                if ($window.confirm("Do you want to delete: " + name)) {
                    //Remove the item from Array using Index.
                    $scope.Customers.splice(index, 1);
                }
            }
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Name</th>
                <th>Country</th>
                <th></th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td>{{m.Name}}</td>
                    <td>{{m.Country}}</td>
                    <td><input type="button" ng-click="Remove($index)" value="Remove" /></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><input type="text" ng-model="Name" /></td>
                    <td><input type="text" ng-model="Country" /></td>
                    <td><input type="button" ng-click="Add()" value="Add" /></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
 
 
Screenshot
AngularJS Dynamic Table example: Dynamically Add / Remove Rows from HTML Table using AngularJS
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads