Funcionamiento de angular.copy

Publicado por parzibyte en

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.


parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

1 Comment

Eliminar referencias de objetos en Javascript - Parzibyte's blog - El blog de Luis Cabrera · febrero 26, 2018 a las 7:21 pm

[…] Es decir, necesitaba crear una nueva copia de un objeto, sin mantener las referencias del original. Si no sabes a lo que me refiero, pásate por este post. […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: