Ne Object: AngularJS | Lista dinámica para Agregar, Editar o Eliminar elementos

En este ejemplo usaremos un único input para agregar y editar elementos de la lista; los botones cambian según el modo (agregar o edición).

1. Estructura básica de HTML

Definimos el esquema inicial del documento.


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con un solo input</title>
</head>
<body>
    <div>
        <!-- contenido de la app irá aquí -->
    </div>
</body>
</html>

2. Agregar AngularJS

Incluimos la librería AngularJS desde un CDN.


<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

Inicializamos la aplicación Angular con ng-app="myApp" y vinculamos el controlador principal con ng-controller="myController".


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

4. Input y botones dinámicos (Agregar / Actualizar / Cancelar)

Colocamos un input enlazado con ng-model="nuevaFruta" para capturar el texto. Los botones cambian según modoEdicion:

Si no estamos en edición (modoEdicion === false) mostramos Agregar.
Si estamos editando (modoEdicion === true) mostramos Actualizar y Cancelar.
Esto permite reutilizar el mismo input para añadir y para editar.


<input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">
<button ng-if="!modoEdicion" ng-click="agregarFruta()">Agregar</button>
<button ng-if="modoEdicion" ng-click="actualizarFruta()">Actualizar</button>
<button ng-if="modoEdicion" ng-click="cancelarEdicion()">Cancelar</button>

5. Lista con opciones de editar y eliminar

Mostramos la lista con ng-repeat. Cada elemento tiene:

El texto de la fruta.
Un botón Editar que carga el valor al input principal y pone la app en modo edición.
Un botón Eliminar que remueve el elemento del array.
Se usa track by $index para evitar problemas cuando hay elementos con el mismo valor.


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

6. Código AngularJS

Definimos el módulo y el controlador. Se inicializan las variables de estado (frutas, nuevaFruta, modoEdicion, indiceEdicion) y las funciones:

agregarFruta() → valida y agrega al array, limpia el input.
eliminarFruta(index) → remueve el elemento; si se estaba editando ese mismo elemento cancela la edición.
editarFruta(index) → carga el elemento en el input y activa el modo edición guardando el índice.
actualizarFruta() → valida y reemplaza el elemento en su índice, luego cancela la edición.
cancelarEdicion() → restaura el estado a modo agregar.


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

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

        // Modelo del input
        $scope.nuevaFruta = "";

        // Estado de edición
        $scope.modoEdicion = false;
        $scope.indiceEdicion = -1;

        // Agregar fruta: valida y añade al array
        $scope.agregarFruta = function () {
            if ($scope.nuevaFruta) {
                $scope.frutas.push($scope.nuevaFruta);
                $scope.nuevaFruta = ""; // limpiar input
            }
        };

        // Eliminar fruta: quita del array y cancela edición si aplica
        $scope.eliminarFruta = function (index) {
            $scope.frutas.splice(index, 1);
            if ($scope.indiceEdicion === index) {
                $scope.cancelarEdicion();
            } else if ($scope.indiceEdicion > index) {
                $scope.indiceEdicion--;
            }
        };

        // Editar fruta: carga el valor en el input y activa modo edición
        $scope.editarFruta = function (index) {
            $scope.nuevaFruta = $scope.frutas[index];
            $scope.indiceEdicion = index;
            $scope.modoEdicion = true;
        };

        // Actualizar fruta: reemplaza el valor en la posición guardada
        $scope.actualizarFruta = function () {
            if ($scope.nuevaFruta && $scope.indiceEdicion > -1) {
                $scope.frutas[$scope.indiceEdicion] = $scope.nuevaFruta;
                $scope.cancelarEdicion();
            }
        };

        // Cancelar edición: limpia el input y restaura el modo agregar
        $scope.cancelarEdicion = function () {
            $scope.nuevaFruta = "";
            $scope.indiceEdicion = -1;
            $scope.modoEdicion = false;
        };
    });
</script>

7. Código completo

Integración de todo en una sola página:


<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Lista dinámica con un solo input</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 principal: se usa para agregar y para editar -->
        <input type="text" ng-model="nuevaFruta" placeholder="Escribe una fruta">

        <!-- Botones que cambian según modoEdicion -->
        <button ng-if="!modoEdicion" ng-click="agregarFruta()">Agregar</button>
        <button ng-if="modoEdicion" ng-click="actualizarFruta()">Actualizar</button>
        <button ng-if="modoEdicion" ng-click="cancelarEdicion()">Cancelar</button>

        <!-- Lista con editar y eliminar -->
        <ul>
            <li ng-repeat="fruta in frutas track by $index">
                {{ fruta }}
                <button ng-click="editarFruta($index)">Editar</button>
                <button ng-click="eliminarFruta($index)">Eliminar</button>
            </li>
        </ul>
    </div>

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

        app.controller("myController", function ($scope) {
            $scope.frutas = ["Manzana", "Naranja", "Plátano"];
            $scope.nuevaFruta = "";
            $scope.modoEdicion = false;
            $scope.indiceEdicion = -1;

            $scope.agregarFruta = function () {
                if ($scope.nuevaFruta) {
                    $scope.frutas.push($scope.nuevaFruta);
                    $scope.nuevaFruta = "";
                }
            };

            $scope.eliminarFruta = function (index) {
                $scope.frutas.splice(index, 1);
                if ($scope.indiceEdicion === index) {
                    $scope.cancelarEdicion();
                } else if ($scope.indiceEdicion > index) {
                    $scope.indiceEdicion--;
                }
            };

            $scope.editarFruta = function (index) {
                $scope.nuevaFruta = $scope.frutas[index];
                $scope.indiceEdicion = index;
                $scope.modoEdicion = true;
            };

            $scope.actualizarFruta = function () {
                if ($scope.nuevaFruta && $scope.indiceEdicion > -1) {
                    $scope.frutas[$scope.indiceEdicion] = $scope.nuevaFruta;
                    $scope.cancelarEdicion();
                }
            };

            $scope.cancelarEdicion = function () {
                $scope.nuevaFruta = "";
                $scope.indiceEdicion = -1;
                $scope.modoEdicion = false;
            };
        });
    </script>

</body>
</html>

Ne Object

viernes, 12 de septiembre de 2025

AngularJS | Lista dinámica para Agregar, Editar o Eliminar elementos