Skip to content
Related Articles

Related Articles

How to append a new table row in AngularJS ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 08 Nov, 2022
Improve Article
Save Article

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;">
        GeeksforGeeks
    </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;">
        GeeksforGeeks
    </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:

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!