How to append a new table row in AngularJS ? ❤️

In this article, we will see how to insert or append the new table row in AngularJS, along with knowing its implementation through the examples.

Approach: The approach is to use the push() method to insert the new rows into the array. This array will be served as the content to the <tr> element. The ng-repeat directive is used to serve the content of the array to the table cells.

Example 1: In the first example, a single column table is used and the content is stored in the array in the form of its element.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Appending a new table row in AngularJS 
    </title> 
  
    <script src= 
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> 
    </script> 
  
    <script> 
        var myApp = angular.module("app", []); 
        myApp.controller("controller", 
            function ($scope) { 
                $scope.rows = ['row-1', 'row-2']; 
                $scope.c = 2; 
                $scope.addRow = function () { 
                    $scope.c++; 
                    $scope.rows.push('row-' + $scope.c); 
                }; 
            }); 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        w3wiki 
    </h1> 
      
    <h3> 
        How to append a new table 
        row in AngularJS 
    </h3> 
    <div ng-app="app"> 
        <div ng-controller="controller"> 
            <button ng-click='addRow()'> 
                Click to add 
            </button><br><br> 
            <table style="border: 1px solid black; 
                    margin: 0 auto;"> 
                <tr> 
                    <th>Col-1</th> 
                </tr> 
                <tr ng-repeat="val in rows"> 
                    <td>{{val}}</td> 
                </tr> 
            </table><br> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: In this example, a table of three columns is used which stores the content of the table in the format of Object.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Appending a new table row in AngularJS 
    </title> 
    <script src= 
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"> 
    </script> 
  
    <script> 
        var myApp = angular.module("app", []); 
        myApp.controller("controller", 
            function ($scope) { 
                $scope.rows = [ 
                    { 'ff': '11', 'fs': '12', 'ft': '13' }, 
                    { 'ff': '21', 'fs': '22', 'ft': '23' } 
                ]; 
                $scope.c = 2; 
                $scope.addRow = function () { 
                    $scope.c++; 
                    $scope.rows.push({ 
                        'ff': $scope.c + 
                            '1', 'fs': $scope.c + 
                                '2', 'ft': $scope.c + '3' 
                    }); 
                }; 
            }); 
    </script> 
</head> 
  
<body style="text-align:center;"> 
    <h1 style="color:green;"> 
        w3wiki 
    </h1> 
      
    <h3> 
        How to append a new table 
        row in AngularJS 
    </h3> 
    <div ng-app="app"> 
        <div ng-controller="controller"> 
            <button ng-click='addRow()'> 
                Click to add 
            </button><br> 
            <br> 
            <table style="border: 1px solid black; 
                    margin: 0 auto;"> 
                <tr> 
                    <th>Col-1</th> 
                    <th>Col-2</th> 
                    <th>Col-3</th> 
                </tr> 
                <tr ng-repeat="val in rows"> 
                    <td>{{val.ff}}</td> 
                    <td>{{val.fs}}</td> 
                    <td>{{val.ft}}</td> 
                </tr> 
            </table><br> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

How to append a new table row in AngularJS ?

HTML

HTML

Contact Us