Kopieren in Angular

Rana Hasnain Khan 15 Februar 2024

Angular Angular Copy

Wir zeigen, wann und wie man die angular.copy in Angular verwendet.

`angular.copy` in Angular

angular.copy ist eine leistungsstarke Methode, um den Wert eines Objekts zu behalten, das wir in eine andere Variable kopieren möchten.

Wenn wir angular.copy verwenden, werden durch Ändern des Eigenschaftswerts oder Hinzufügen einer neuen Eigenschaft alle Objekte aktualisiert, die auf dasselbe Objekt verweisen. angular.copy ist nicht als Allzweck-Kopierfunktion gedacht.

Es hat auch einige Einschränkungen. Wenn kein Ziel an angular.copy übergeben wird, wird eine Kopie des Objekts oder ein Array erstellt.

Wenn wir das Ziel angeben, werden alle seine Elemente für Arrays und Eigenschaften für Objekte gelöscht und alle Elemente/Eigenschaften aus der Quelle werden dorthin kopiert. Wenn die angegebene Quelle kein Objekt oder Array mit null und undefined ist, wird die Quelle zurückgegeben.

Wenn die angegebene Quelle mit dem angegebenen Ziel identisch ist, wird eine Ausnahme ausgelöst. Einige Objekttypen, die von angular.copy nicht korrekt behandelt werden, wie File, Map, ImageData, MediaStream, Set, WeakMap, Getter und Setter.

angular.copy dupliziert die Variable tief. Eine tiefe Kopie einer Variablen ist diejenige, die nicht dieselbe Speicheradresse wie die ursprüngliche Variable hat.

Lassen Sie uns zum Beispiel ein Formular erstellen, das Benutzereingaben entgegennimmt und angular.copy verwendet. Unser HTML-Code wird wie unten aussehen.

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

Und unser Code in script.js wird wie unten aussehen.

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

Wie im obigen Beispiel zu sehen, haben wir angular.copy zweimal verwendet. In $scope.user = angular.copy($scope.member); wir haben es mit einem Parameter und in angular.copy(user, $scope.member); Wir haben angular.copy mit zwei Parametern verwendet.

Ausgabe:

angular copy result

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 in Angular

`angular.copy` in Angular