angularjs

Funcionamiento de angular.copy

Introducción

angular.copy es una función que trae el framework AngularJS. Funciona para, como su nombre lo indica, copiar variables.

Cada que utilizamos angular.copy, ésta función devuelve una nueva copia exacta del objeto que le pasamos, pero sin mantener la referencia en el objeto original.

Así, aunque esta nueva copia sufra cambios, el original no se verá afectado. Y lo mismo pasa si el original sufre cambios

Demostración sin angular.copy

Para explicar mejor el funcionamiento, hagamos un pequeño ejemplo que guarde el nombre y la edad de las mascotas en un arreglo. Y luego, que lo dibuje en una tabla.

Como se puede ver, la primera mascota se guarda correctamente. Pero al querer guardar la segunda, o escribir en un input, todas las de la tabla sufren cambios. Esto es debido a que angular mantiene vigilados a los objetos, y como la referencia es la misma entonces actualiza a todos.

Justo en estos casos es cuando copy viene al rescate.

Demostración con angular.copy

Ahora probemos este, en donde sólo modificamos la línea en donde hacemos el push. En este caso, agregamos la copia del elemento al arreglo.

En conclusión, es bueno utilizar esta función si no queremos que los objetos sean los mismos y al actualizar uno se actualicen todos.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

1 semana hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.