Angular로 복사

Rana Hasnain Khan 2024년2월15일

Angular Angular Copy

angular에서 angular.copy를 언제 어떻게 사용하는지 보여드리겠습니다.

Angular의 `angular.copy`

angular.copy는 다른 변수에 복사하려는 객체의 값을 유지하는 강력한 방법입니다.

angular.copy를 사용할 때 속성 값을 변경하거나 새 속성을 추가하면 동일한 개체를 참조하는 모든 개체가 업데이트됩니다. angular.copy는 다목적 복사 기능이 아닙니다.

몇 가지 제한 사항도 있습니다. angular.copy에 대상이 제공되지 않으면 개체 또는 배열의 복사본이 생성됩니다.

대상을 제공하면 배열의 모든 요소와 개체의 속성이 삭제되고 소스의 모든 요소/속성이 대상으로 복사됩니다. 제공된 소스가 null 및 undefined를 포함하는 객체 또는 배열이 아닌 경우 소스가 반환됩니다.

제공된 source가 제공된 대상과 동일한 경우 예외가 발생합니다. File, Map, ImageData, MediaStream, Set, WeakMap, getter 및 setter와 같이 angular.copy에서 올바르게 처리되지 않는 일부 개체 유형.

‘angular.copy’는 변수를 깊이 복제합니다. 변수의 전체 복사본은 원래 변수와 동일한 메모리 주소를 공유하지 않는 복사본입니다.

예를 들어 사용자의 입력을 받아 angular.copy를 사용하는 양식을 만들어 보겠습니다. HTML 코드는 아래와 같을 것입니다.

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

그리고 script.js의 코드는 다음과 같습니다.

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

위의 예에서 볼 수 있듯이 angular.copy를 두 번 사용했습니다. $scope.user = angular.copy($scope.member); 하나의 매개변수와 angular.copy(user, $scope.member);에서 사용했습니다. 두 개의 매개변수와 함께 angular.copy를 사용했습니다.

출력:

Angular 복사 결과

작가: 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의 angular.copy

Angular의 `angular.copy`