Copiar en Angular

Rana Hasnain Khan 15 febrero 2024

Angular Angular Copy

Demostraremos cuándo y cómo usar angular.copy en angular.

`angular.copy` en Angular

angular.copy es un método poderoso para mantener el valor de un objeto que queremos copiar en otra variable.

Cuando usamos angular.copy, cambiar el valor de la propiedad o agregar una nueva propiedad actualizará todos los objetos que hacen referencia al mismo objeto. angular.copy no pretende ser una función de copia para todo uso.

Tiene algunas limitaciones también. Si no se proporciona ningún destino a angular.copy, se creará una copia del objeto o un array.

Si proporcionamos el destino, todos sus elementos paral array y las propiedades para los objetos se eliminarán y todos los elementos/propiedades del origen se copiarán en él. Si el origen proporcionado no es un objeto o un array, incluyendo null y undefined, se devolverá el origen.

Si la Quelle proporcionada es idéntica al destino proporcionado, generará una excepción. Algunos tipos de objetos que angular.copy no maneja correctamente, como File, Map, ImageData, MediaStream, Set, WeakMap, getter y setter.

angular.copy duplica profundamente la variable. Una copia profunda de una variable es aquella que no comparte la misma dirección de memoria que la variable original.

Por ejemplo, creemos un formulario que tomará la entrada de los usuarios y usará angular.copy. Nuestro código HTML será como el siguiente.

# angular
<body ng-app="NgCopy">
  <div ng-controller="NgController">
  <form novalidate class="simple-form">
    <label>Name: <input type="text" ng-model="user.name" /></label><br />
    <button ng-click="ngreset()">RESET</button>
    <button ng-click="ngupdate(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>member = {{member | json}}</pre>
</div>
</body>

Y nuestro código en script.js se verá como a continuación.

# angular
(function(angular) {
  'use strict';
angular.
  module('NgCopy', []).
  controller('NgController', ['$scope', function($scope) {
    $scope.member = {};

    $scope.ngreset = function() {
      $scope.user = angular.copy($scope.member);
    };

    $scope.ngupdate = function(user) {
      angular.copy(user, $scope.member);
    };

    $scope.ngreset();
  }]);
})(window.angular);

Como se ve en el ejemplo anterior, usamos angular.copy dos veces. En $scope.user = angular.copy($scope.member); lo hemos usado con un parámetro, y en angular.copy(user, $scope.member); usamos angular.copy con dos parámetros.

Producción:

resultado de copia angular

Autor: Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

angular.copy en Angular

`angular.copy` en Angular