Copying in Angular

Current Location：Home > Learning > WEB FRONT-END > Angular >

Vue React JavaScript Angular CSS HTML

Copying in Angular

Author：JIYIK Last Updated：2025/04/18 Views：

We will demonstrate when and how to use it in angular angular.copy.

Angular`angular.copy`

angular.copyis a powerful method for saving the value of an object that we want to copy to another variable.

When we use angular.copy, changing the value of a property or adding a new property will update all objects that reference the same object. angular.copyis not a general purpose copy function.

It also has some limitations. If no angular.copytarget is provided for , a copy of the object or array will be created.

If we provide a target, all its array elements and object properties will be removed and all elements/properties from the source will be copied to it. If the provided source is not an object or array containing and , the source will be returned null.undefined

It will throw an exception if the provided sourceis the same as the provided target. angular.copySome object types cannot be handled correctly, such as File, Map, ImageData, MediaStream, Set, WeakMap, getters and setters.

angular.copyThe variable is deeply copied. A deep copy of a variable is a variable that does not share the same memory address as the original variable.

For example, let's create a angular.copyform that accepts user input and uses . Our HTMLcode is shown below.

# 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>

Our script.jscode in will look like this.

# 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);

As you can see in the example above, we have used it twice angular.copy. In $scope.user = angular.copy($scope.member);we have used it with one argument and in angular.copy(user, $scope.member);we have used it with two arguments angular.copy.

Output:

Angular copy result

Previous：Select an option in the Angular drop-down menu

Next：Uploading images in Angular

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >