different scope for array and angular copy

Question

It is easier to see the question from this plunkr: http://plnkr.co/edit/EFZCAXWFui0foMbfZkPb?p=preview

Click on 'Click to add first' and 'Click to add second', then you can click on the 'lock' icon to see some of the items seem to have the same scope (or same ng-model).

and then click on 'Click to add third' this action does an angular.copy, it does not share the same scope with the other 2. Why is that?

How do I separate the scope so that I can have each 'lock' icon only apply on itself, not other items?

Pascal Ockert · Accepted Answer · 2014-01-18 01:17:05Z

5

In this line:

var row = {"groupname":Math.floor(Math.random() * 9999999) + 1};

you create a new object and you create a reference to this object which is stored in the variable row. You only add this reference (not a copy of the row object) to your arrays, so the elements in both arrays point to the same object.

angular.copy creates a "deep copy" of your array, so all included objects will be copied and the array contains references to these new objects.

If you want to have separate objects, use angular.copy in the clickFirst function to duplicate the object:

var row = {"groupname":Math.floor(Math.random() * 9999999) + 1};
$scope.products1.push(row);
$scope.products2.push(angular.copy(row));

answered Jan 18, 2014 at 1:17

Pascal Ockert

9845 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

different scope for array and angular copy

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related