Why angularjs change variables that are different?

Question

I am getting an ajax data from api and saving it to a variable. And I have to "edit and save" or "edit and cancel" changes on this data. I am using ng-model to show and edit this data.

Here is my script:

function getData() {
    $http({
        method: 'POST',
        url: API + '/api/Educations/UserEducations',
        data: {}
    }).then(function successCallback(response) {
        vm.UserData = response.data;
        vm.CachedUserData = response.data;
    })
}

And here is my html:

<div ng-repeat="education in editEducationsCtrl.UserData">
    <div>{{education.SchoolName}}</div>
    <input type="text" ng-model="education.SchoolName">

    <button ng-click="editEducationsCtrl.saveChanges()">Save</button>
    <button ng-click="editEducationsCtrl.cancelChanges()">Cancel</button>
</div>

When user clicked cancel button, I want to write html cached data. But, When I try to access vm.CachedUserData variable, I am seeing this cached data has already changed with new value of vm.UserData... How? I have checked my code there is no function access CachedUserData variable. Even I changed variable name to unique name but result is same.

I want to save first data in a variable. But angular changes both of them. Is 2 way databinding change all variables that connected the same ajax data?

score 3 · Answer 1 · edited May 23 '17 at 12:24

3

= in JavaScript does not clone the variable, it creates another pointer on it. That means you can handle your variable by using both vm.UserData and vm.CachedUserData. It seems you want to clone your variable, so:

If it is an array:

...
}).then(function successCallback(response) {
    vm.UserData = response.data.splice(0);
    vm.CachedUserData = response.data.splice(0);
})
...

If it is an object:

var newObject = jQuery.extend({}, oldObject); if you have JQuery
obj = JSON.parse(JSON.stringify(o)); without JQuery

Here is a good link for cloning objects in JS.

edited May 23 '17 at 12:24

Community

1
1

answered Jun 27 '16 at 12:32

Mistalis

17,793
13
73
97

1

there is `angular.copy` or `angular.merge` for shallow/deep copy of object. – Walfrat Jun 27 '16 at 12:35
Absolutely. Thanks for your comment! :-) – Mistalis Jun 27 '16 at 12:44
Thank you. It worked but now I have a different problem. Html view isn't change when I assign `vm.UserData = vm.CachedData` . Could you please help me in this subject too? – Sam Jun 27 '16 at 12:58
I think you should provide the code that assign UserData to CachedData (`saveChanges()` function?). Anyway, you should rather ask another question, this is a different problem from this one. – Mistalis Jun 27 '16 at 13:04
Ok then, Thanks a lot. – Sam Jun 27 '16 at 13:15

score 3 · Accepted Answer · answered Jun 27 '16 at 12:40

3

I recommend you to use angular.copy() to bind the data you want to cache:

vm.UserData = response.data;
vm.CachedUserData = angular.copy(response.data);

answered Jun 27 '16 at 12:40

Milo Shen

56
3

It worked, thanks but Html view isn't change when I assign `vm.UserData = vm.CachedData` . Could you help me in this subject too? – Sam Jun 27 '16 at 12:51
Not make sense, probably the variable name is wrong, should be 'vm.CachedUserData'? – Milo Shen Jun 27 '16 at 13:03

Why angularjs change variables that are different?

2 Answers2