How to append a new table row in AngularJS ? Last Updated : 08 Nov, 2022 Comments Improve Suggest changes Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to append a new table row in AngularJS ? P PranchalKatiyar Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Questions Similar Reads How to Delete a Row from Table using AngularJS ? Given a HTML table and the task is to remove/delete the row from the table with the help of AngularJS.Approach: The approach is to delete the row from the array where it stored and served to the table data. When the user clicks on the button near to the table row, it passes the index of that table a 2 min read How to Add Edit and Delete Table Row in jQuery ? In this article, we will create an example of how to add, edit and delete table rows in jQuery. For creating this functionality we need to know about the basics of the HTML table, jQuery basic functionality. Table row: An HTML table is a combination of rows and columns. The table row is in the horiz 3 min read How to print an array in table format using angularJS? Given an array & the task is to print the given array in the tabular format using AngularJS. In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on t 4 min read How to display static JSON data in table in Angular ? In this article, we will see How to display static JSON data in the table in Angular. We will be displaying static data objects in Angular Table. We need to iterate over the object keys and values using key values and then handle them in the table. We will be using the bootstrap table and Angular Pr 3 min read Angular PrimeNG Table Row Editing Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. It provides a lot of templates, components, theme design, an extensive icon library, and much more. 7 min read Angular PrimeNG Table Rows Reordering Angular PrimeNG is a UI toolkit to make web applications with Angular. It consists of hundreds of pre-built component that makes it easy for developers to create a beautiful and responsive web solution in less time. In this article, we will see Angular PrimeNG Table Rows Reordering. The Table Compon 5 min read Angular PrimeNG Drag and Drop to Table Angular PrimeNG is a UI component library for Angular Applications. It offers many pre-built themes and UI components for a variety of tasks like inputs, menus, charts, Buttons, etc. In this article, we will see how to use the Drag and Drop to Table in Angular PrimeNG. Angular PrimeNG Drag and Drop 5 min read How to Create Todo List in Angular 7 ? The ToDo app is used to help us to remember some important task. We just add the task and when accomplished, delete them. This to-do list uses various Bootstrap classes that make our web application not only attractive but also responsive. Approach: Create a new angular app using following command: 2 min read How to remove an item from an array in AngularJS Scope? In the AngularJS framework, we can manipulate the data that is within the scope, for example, we can perform the operations on an array by removing its elements. This helps us for better efficiency in developing the web application.We can remove the array elements in the applications like to-do list 5 min read How to show a span element for each rows clicked in AngularJS ? In this article, we will see how to display a span element for each row clicked in AngularJS. A span element is used to group in-line elements in a document. It can be used to make a hook to a particular part of the document which may be subject to a particular action based on DOM events. The span e 4 min read Like