Why and when to use angular.copy? (Deep Copy)
Solution 1:
Use angular.copy when assigning value of object or array to another variable and that object
value should not be changed.
Without deep copy or using angular.copy, changing value of property or adding any new property update all object referencing that same object.
var app = angular.module('copyExample', []);
app.controller('ExampleController', ['$scope',
function($scope) {
$scope.printToConsole = function() {
$scope.main = {
first: 'first',
second: 'second'
};
$scope.child = angular.copy($scope.main);
console.log('Main object :');
console.log($scope.main);
console.log('Child object with angular.copy :');
console.log($scope.child);
$scope.child.first = 'last';
console.log('New Child object :')
console.log($scope.child);
console.log('Main object after child change and using angular.copy :');
console.log($scope.main);
console.log('Assing main object without copy and updating child');
$scope.child = $scope.main;
$scope.child.first = 'last';
console.log('Main object after update:');
console.log($scope.main);
console.log('Child object after update:');
console.log($scope.child);
}
}
]);
// Basic object assigning example
var main = {
first: 'first',
second: 'second'
};
var one = main; // same as main
var two = main; // same as main
console.log('main :' + JSON.stringify(main)); // All object are same
console.log('one :' + JSON.stringify(one)); // All object are same
console.log('two :' + JSON.stringify(two)); // All object are same
two = {
three: 'three'
}; // two changed but one and main remains same
console.log('main :' + JSON.stringify(main)); // one and main are same
console.log('one :' + JSON.stringify(one)); // one and main are same
console.log('two :' + JSON.stringify(two)); // two is changed
two = main; // same as main
two.first = 'last'; // change value of object's property so changed value of all object property
console.log('main :' + JSON.stringify(main)); // All object are same with new value
console.log('one :' + JSON.stringify(one)); // All object are same with new value
console.log('two :' + JSON.stringify(two)); // All object are same with new value
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="copyExample" ng-controller="ExampleController">
<button ng-click='printToConsole()'>Explain</button>
</div>
Solution 2:
In that case, you don't need to use angular.copy()
Explanation :
=
represents a reference whereasangular.copy()
creates a new object as a deep copy.Using
=
would mean that changing a property ofresponse.data
would change the corresponding property of$scope.example
or vice versa.Using
angular.copy()
the two objects would remain seperate and changes would not reflect on each other.