AngularJS에 값을 복사하는 방법이 몇가지 있습니다.
(1) Deep Copy : angular.copy
(2) Shallow Copy : angular.extend
(3) Merge : angular.merge
(1) Deep Copy : angular.copy
※ 출처 : https://docs.angularjs.org/api/ng/function/angular.copy
Creates a deep copy of source, which should be an object or an array.
If no destination is supplied, a copy of the object or array is created.
If a destination is provided, all of its elements (for arrays) or properties (for objects) are deleted and then all elements/properties from the source are copied to it.
If source is not an object or array (inc. null and undefined), source is returned.
If source is identical to 'destination' an exception will be thrown.
[angular.copy 샘플 소스]
// (1) source Data
$scope.sourceData1 = [
{"Name" : "Hwang Sanggyu"},
{"Age" : "40"}
];
// (2) Destination Data
$scope.destData1 = [];
//(3) $scope.sourceData1를 $scope.destData1로 복사 (call by value)
angular.copy($scope.sourceData1, $scope.destData1);
// (4) $scope.sourceData1에 값 추가
$scope.sourceData1.push ({"Country" : "Korea"});
// 출력
console.log($scope.sourceData1);
console.log($scope.destData1);
// 위의 샘플 소스에서 변수 할당시 angular.copy( )는 call by value 방식으로 할당하기 때문에
$scope.sourceData1와 $scope.destData1의 값은 아래와 같다.
$scope.sourceData1 = [
{"Name" : "Hwang Sanggyu"},
{"Age" : "40"},
{"Country" : "Korea"}
];
$scope.destData1 = [
{"Name" : "Hwang Sanggyu"},
{"Age" : "40"}
];
(2) Shallow Copy : angular.extend
※ 출처 : https://docs.angularjs.org/api/ng/function/angular.extend
Extends the destination object dst by copying own enumerable properties from the src object(s) to dst. You can specify multiple src objects. If you want to preserve original objects, you can do so by passing an empty object as the target: var object = angular.extend({}, object1, object2).
Note: Keep in mind that angular.extend does not support recursive merge (deep copy). Use angular.merge for this.
[angular.extend 샘플 소스]
// (1) $scope.sourceData1, $scope.sourceData2, $scope.sourceData3
$scope.destData1 = [
{"Name" : "Hwang Sanggyu3"},
{"Country" : "Korea"},
{"Age" : "42"},
{"Address" : "Incheon"}
];
$scope.sourceData1 = [
{"Name" : "Hwang Sanggyu1"}
];
$scope.sourceData2= [
{"Name" : "Hwang Sanggyu2"},
{"Age" : "40"},
{"Address" : "Seoul"}
];// (2) angular.extend
angular.extend($scope.destData1, $scope.sourceData1, $scope.sourceData2);
// 출력
console.log($scope.destData1);
console.log($scope.sourceData1);
console.log($scope.sourceData2);
$scope.destData1 값이 바뀐 것을 확인 할 수 있다.
$scope.destData1 = [
{"Name" : "Hwang Sanggyu2"},
{"Age" : "40"}, {"Address" : "Seoul"},
{"Address" : "Incheon"}
];
$scope.sourceData1 = [
{"Name" : "Hwang Sanggyu1"}
];
$scope.sourceData2= [
{"Name" : "Hwang Sanggyu2"},
{"Age" : "40"},
{"Address" : "Seoul"}
];
[angular.extend 실행 후의 $scope.destData1]
// angular.extend 실행 후의 $scope.destData1
$scope.destData1= [
{"Name" : "Hwang Sanggyu2"},
{"Age" : "40"},
{"Address" : "Seoul"},
{"Address" : "Incheon"}
];
$scope.destData1 에 대해서,
$scope.sourceData1와 $scope.sourceData2가 위에 덮혀지면서(shallow),
최종적으로 가장 상위의 값들만 남는다고 생각하면 쉽게 이해할 수 있다.
angular.extend의 결과 값 |
{ "Name" : "Hwang Sanggyu2" } |
{ "Age" : "40" }, |
{ "Address" : "Seoul" } |
{ "Address" : "Incheon" } |
$scope.sourceData2 |
{ "Name" : "Hwang Sanggyu2" } |
{ "Age" : "40" } |
{ "Address" : "Seoul" } |
|
$scope.sourceData1 |
{ "Name" : "Hwang Sanggyu1" } |
|
|
|
$scope.destData1 |
{ "Name" : "Hwang Sanggyu2" } |
{ "Country" : "Korea" } |
{ "Address" : "Seoul" } |
{ "Address" : "Incheon" } |
(3) angular.merge
※ 출처 : https://docs.angularjs.org/api/ng/function/angular.merge
Deeply extends the destination object dst by copying own enumerable properties from the src object(s) to dst. You can specify multiple src objects. If you want to preserve original objects, you can do so by passing an empty object as the target: var object = angular.merge({}, object1, object2).
Unlike extend(), merge() recursively descends into object properties of source objects, performing a deep copy.
[angular.merge 샘플 소스]
// (1) Data
$scope.destData1 = [
{"Name" : "Hwang Sanggyu3"},
{"Country" : "Korea"},
{"Age" : "42"},
{"Address" : "Incheon"}
];
$scope.sourceData2 = [
{"Name" : "Hwang Sanggyu1"}
];
$scope.sourceData3 = [
{"Name" : "Hwang Sanggyu2"},
{"Age" : "40"},
{"Address" : "Seoul"}
];
// merge( ) 실행
angular.merge($scope.destData1, $scope.sourceData2, $scope.sourceData3);// 출력
console.log($scope.destData1);
console.log($scope.sourceData1);
console.log($scope.sourceData2);
angular.merge실행 후의 $scope.destData1]
// angular.merge 실행 후의 $scope.destData1 $scope.destData1= [
{"Name" : "Hwang Sanggyu2"},
{"Age" : "40"},
{"Country" : "Korea"},
{"Address" : "Seoul"},
{"Age" : "42"},
{"Address" : "Incheon"}
];
$scope.destData1 에 대해서,
$scope.sourceData1와 $scope.sourceData2가 위에 덮혀지면서(shallow),
최종적으로 가장 상위의 값들만 남는다고 생각하면 쉽게 이해할 수 있다.
angular.extend의 결과 값 | { "Name" : "Hwang Sanggyu2" } | { "Age" : "40" }, { "Country" : "Korea" } | { "Address" : "Seoul" }, { "Age" : "42" } | { "Address" : "Incheon" } |
$scope.sourceData2 | { "Name" : "Hwang Sanggyu2" } | { "Age" : "40" } | { "Address" : "Seoul" } |
|
$scope.sourceData1 | { "Name" : "Hwang Sanggyu1" } |
|
|
|
$scope.destData1 | { "Name" : "Hwang Sanggyu2" } | { "Country" : "Korea" } | { "Age" : "42" } | { "Address" : "Incheon" } |
