lunes, 1 de septiembre de 2025

AngularJS | Agregar elementos a una lista con ng-repeat

En este ejemplo veremos cómo agregar elementos dinámicamente a una lista usando AngularJS y ng-repeat.

1. Estructura básica de HTML

Comenzamos con un documento HTML simple:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Agregar elementos en tiempo real con ng-repeat</title>
</head>
<body>
    <div>
    </div>
</body>
</html>

2. Agregar AngularJS

Incluimos la librería AngularJS en la sección <head>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
        integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

3. Definir la aplicación y el controlador

Agregamos las directivas ng-app y ng-controller:

<html ng-app="myApp">
<body ng-controller="myController">

4. Caja de texto y botón para agregar elementos

Creamos un input vinculado a la variable nuevaFruta y un botón que ejecuta la función agregarFruta():

<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-click="agregarFruta()">Agregar</button>

5. Lista con ng-repeat

Mostramos la lista de frutas, incluyendo algunas definidas por defecto, usando ng-repeat:

<ul>
    <li ng-repeat="fruta in frutas">{{ fruta }}</li>
</ul>

Cómo funciona:

  • fruta in frutas recorre cada elemento del array $scope.frutas.

  • {{ fruta }} muestra el valor de cada elemento en la vista.

  • Cada vez que agregamos un nuevo elemento, la lista se actualiza automáticamente.

6. Código AngularJS

Definimos el módulo y el controlador, inicializamos la lista y creamos la función para agregar elementos:

<script>
    var app = angular.module("myApp", []);

    app.controller("myController", function ($scope) {
        // Lista inicial
        $scope.frutas = ["Manzana", "Naranja", "Plátano"];

        // Función para agregar frutas
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) { // Validamos que no esté vacío
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = ""; // Limpiamos el input
            }
        };
    });
</script>

7. Código completo

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Agregar elementos en tiempo real con ng-repeat</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"
            integrity="sha512-KZmyTq3PLx9EZl0RHShHQuXtrvdJ+m35tuOiwlcZfs/rE7NZv29ygNA8SFCkMXTnYZQK2OX0Gm2qKGfvWEtRXA=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body ng-controller="myController">

    <div>
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
        <button ng-click="agregarFruta()">Agregar</button>

        <ul>
            <li ng-repeat="fruta in frutas">{{ fruta }}</li>
        </ul>
    </div>

    <script>
        var app = angular.module("myApp", []);

        app.controller("myController", function ($scope) {
            // Lista inicial
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];

            // Función para agregar frutas
            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };
        });
    </script>

</body>
</html>

✅ Este ejemplo muestra cómo crear una lista interactiva en AngularJS que se actualiza en tiempo real al agregar elementos con un input y un botón.

en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)