CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
Annie C
Annie C

Reputation: 804

different scope for array and angular copy

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?

Upvotes: 2

Views: 7173

Answers (1)

Pascal Ockert
Pascal Ockert

Reputation: 984

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

Upvotes: 5

Related Questions