Angularjs: prevent binding

Question

How can i prevent binding in this case:

$scope.data = [{i:0, a:0}, {i:0, a:0}, {i:0, a:0}];
$scope.twoofthedata = [$scope.data, $scope.data];

so that $scope.twoofthedata[0] is indipendent from $scope.twoofthedata[1]

plunker

aymericbeaumet · Accepted Answer · 2014-08-25 23:05:17Z

3

In JavaScript, objects are manipulated by reference. This is not an Angular binding issue.

However Angular enables you to bypass this language constraint via the angular.copy method, which creates a deep copy of a given object.

$scope.data = [{i:0, a:0}, {i:0, a:0}, {i:0, a:0}];

// Manually call `angular.copy` on each member
$scope.twoofthedata = [
  angular.copy($scope.data),
  angular.copy($scope.data)
];

// Cleaner version (using `Array.prototype.map`)
$scope.twoofthedata = [$scope.data, $scope.data].map(angular.copy);

However you should be warned that a deep copy could be very expensive, and therefore only be used when truly necessary.

FYI: if you encounter a similar issue but not using Angular, you could use Lodash which also has a deep clone method.

edited Aug 25, 2014 at 23:05

answered Aug 25, 2014 at 22:59

aymericbeaumet

7,4022 gold badges40 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

daniel Over a year ago

had some problems with $watch(), and changed angular.copy($scope.data) > $.extend(true, {}, $scope.data); now is not showing RangeError: Maximum call stack size exceeded

aymericbeaumet Over a year ago

What kind of problem did you have with $watch?

daniel Over a year ago

RangeError: Maximum call stack size exceeded

aymericbeaumet Over a year ago

And you have the same problem using $.extend?

Collectives™ on Stack Overflow

Angularjs: prevent binding

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related