Ne Object: septiembre 2025

viernes, 12 de septiembre de 2025

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>

viernes, 5 de septiembre de 2025

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>

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.

viernes, 12 de septiembre de 2025

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

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

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

5. Lista con opciones de editar y eliminar

6. Código AngularJS

7. Código completo

viernes, 5 de septiembre de 2025

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

Lista dinámica con opción de eliminar elementos

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

4. Input y botón para agregar frutas

5. Lista con opción de eliminar

6. Código AngularJS

7. Código completo

lunes, 1 de septiembre de 2025

AngularJS | Agregar elementos a una lista con ng-repeat

1. Estructura básica de HTML

2. Agregar AngularJS

3. Definir la aplicación y el controlador

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

5. Lista con ng-repeat

6. Código AngularJS

7. Código completo

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

5. Lista con `ng-repeat`