Ne Object: AngularJS | Lista dinámica con opción de eliminar elementos

Lista dinámica con opción de eliminar elementos

En este ejemplo aprenderás cómo agregar y eliminar elementos de una lista utilizando AngularJS y ng-repeat.

1. Estructura básica de HTML

Comenzamos con la estructura inicial de la página:


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con ng-repeat</title>
</head>
<body>
    <div>
    </div>
</body>
</html>

2. Agregar AngularJS

Incluimos la referencia a la librería AngularJS:


<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 para inicializar nuestra aplicación y enlazarla al controlador:


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

4. Input y botón para agregar frutas

Ahora creamos una caja de texto enlazada al modelo nuevaFruta y un botón que ejecuta el método agregarFruta():


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

5. Lista con opción de eliminar

Mostramos los elementos usando ng-repeat. Cada fruta tiene un botón para eliminarla mediante la función eliminarFruta($index):


<ul>
    <li ng-repeat="fruta in frutas">
        {{ fruta }}
        <button ng-click="eliminarFruta($index)">Eliminar</button>
    </li>
</ul>

6. Código AngularJS

Definimos el módulo, el controlador y las funciones necesarias:


<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 = "";
            }
        };

        // Función para eliminar frutas
        $scope.eliminarFruta = function (index) {
            $scope.frutas.splice(index, 1);
        };
    });
</script>

7. Código completo


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica 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 }}
                <button ng-click="eliminarFruta($index)">Eliminar</button>
            </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 = "";
                }
            };

            // Función para eliminar frutas
            $scope.eliminarFruta = function (index) {
                $scope.frutas.splice(index, 1);
            };
        });
    </script>

</body>
</html>

Ne Object

viernes, 5 de septiembre de 2025

AngularJS | Lista dinámica con opción de eliminar elementos