Deep copy (unbind) two scope variables - AngularJS

Question

I'm trying to have two separate variables (data.newPictures, profile.pictures), one initialized with the values of the other.

Initialization runs well, but when I edit one runnig function removeNewPicture($index) I edit also the second one (like they're binded).

The expected result is the total independence of the two objects, so that function only removes data from data.newPictures, keeping profile.pictures unchanged.

Any ideas how to prevent this?

app.controller('ModelController', function($scope, $rootScope, $state, $stateParams, $models, $toast) {
$models.getModel($stateParams.uid)
    .then((model) => {
        $scope.profile = model;

        $scope.data = {
            edit: false,
            newPictures: $scope.profile.pictures, // <<< Initialization
            newBiography: $scope.profile.biography,
            newFeatures: $scope.profile.features,
            newStarting_fees: $scope.profile.starting_fees
        };
    })
    .catch((err) => {
        $toast.error(err.err);
        if(err.code === 69) $state.go('login');
    });

  $scope.removeNewPicture = ($index) => {
    $scope.data.newPictures.splice($index, 1); // <<< This edits both the objects
    console.log($scope.data.newPictures, $scope.profile.pictures);
  };

  $scope.profile = {};
  $scope.data = {};
});

Silvinus · Accepted Answer · 2016-06-28 08:35:19Z

3

Picture and newPicture reference the same array. Create a copy to newPictures to avoid this issue

newPictures: angular.copy($scope.profile.pictures),

answered Jun 28, 2016 at 8:35

Silvinus

1,4459 silver badges16 bronze badges

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

1 Comment

Jake Cross Over a year ago

Used this, seems more "Angular" I guess haha. Thanks :)

morels · Accepted Answer · 2016-06-28 08:35:41Z

1

They are basically the same object.

You should assign newPictures like $scope.profile.pictures.slice(0); in order to get the array copied.

Snippet would become:

$scope.data = {
            edit: false,
            newPictures: $scope.profile.pictures.slice(0),
            newBiography: $scope.profile.biography,
            newFeatures: $scope.profile.features,
            newStarting_fees: $scope.profile.starting_fees
        };

answered Jun 28, 2016 at 8:35

morels

2,11520 silver badges24 bronze badges

Comments

MarcoS · Accepted Answer · 2016-06-28 08:37:58Z

1

$scope.data.newPictures and $scope.profile.pictures refer the same object.
You should 'clone' the object you want to copy:

...
newPictures: jQuery.extend(true, {}, $scope.profile.pictures);
...

answered Jun 28, 2016 at 8:37

MarcoS

17.8k27 gold badges101 silver badges189 bronze badges

Collectives™ on Stack Overflow

Deep copy (unbind) two scope variables - AngularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related