为什么 angularjs 更改不同的变量？

Question

我正在从 api 获取 ajax 数据并将其保存到一个变量中。我必须 "edit and save" 或 "edit and cancel" 更改此数据。我正在使用 ng-model 来显示和编辑这些数据。

这是我的脚本：

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

这是我的 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>

当用户点击取消按钮时，我想写入 html 缓存数据。但，当我尝试访问 vm.CachedUserData 变量时，我看到这个缓存数据已经更改为 vm.UserData 的新值...如何？我检查了我的代码，没有函数访问 CachedUserData 变量。即使我将变量名更改为唯一名称，但结果是相同的。

我想将第一个数据保存在一个变量中。但是 angular 改变了它们。 2 路数据绑定是否更改连接相同 ajax 数据的所有变量？

Answer 1

= in JavaScript 不会克隆变量，它会在其上创建另一个指针。这意味着您可以使用 vm.UserData 和 vm.CachedUserData 来处理您的变量。看来你想克隆你的变量，所以：

如果是数组：

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

如果是对象：

var newObject = jQuery.extend({}, oldObject); 如果你有 JQuery
obj = JSON.parse(JSON.stringify(o)); 没有 JQuery

这里是good link在JS中克隆对象

Answer 2

我推荐你使用angular.copy()来绑定你要缓存的数据：

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

为什么 angularjs 更改不同的变量？

Why angularjs change variables that are different?

html

angularjs

ajax

angularjs-ng-model

2-way-object-databinding