¿Cómo agregar una nueva fila de tabla en AngularJS?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *