How to append a new table row in AngularJS ? - GeeksforGeeks

15 Oct, 2020
Here the task is to insert a new row in the table with the help of AngularJS.
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 is used to serve the content of the array to the table cells.
Example 1: In the first example, the a single column table is used and the content is stored in the array in the form of its element.
<!DOCTYPE html><html>  <head>    <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>    <p>        How to append a new table         row in AngularJS    </p>    <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.
<!DOCTYPE html><html>  <head>    <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>    <p>        How to append a new table         row in AngularJS    </p>    <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:
AngularJS-Misc
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Auth Guards in Angular 9/10/11
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Calendar Component
How to set focus on input field automatically on page load in AngularJS ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills