Aquí la tarea es insertar una nueva fila en la tabla con la ayuda de AngularJS.
Enfoque: El enfoque es usar el método push() para insertar las nuevas filas en la array. Esta array se servirá como el contenido del elemento <tr>. La repetición ng se usa para servir el contenido de la array a las celdas de la tabla.
Ejemplo 1: en el primer ejemplo, se usa una tabla de una sola columna y el contenido se almacena en la array en forma de su elemento.
<!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>
Producción:
Ejemplo 2: En este ejemplo se utiliza una tabla de tres columnas la cual almacena el contenido de la tabla en formato de Objeto.
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA