为什么angularjs会改变不同的变量？答案

【问题标题】：Why angularjs change variables that are different?为什么angularjs会改变不同的变量？
【发布时间】：2016-10-29 11:19:06
【问题描述】：

我从 api 获取 ajax 数据并将其保存到变量中。我必须对这些数据进行“编辑和保存”或“编辑和取消”更改。我正在使用 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 变量。即使我将变量名更改为唯一名称，但结果是相同的。

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

【问题讨论】：

标签： html angularjs ajax angularjs-ng-model 2-way-object-databinding

【解决方案1】：

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

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

【讨论】：

它工作了，谢谢，但是当我分配 vm.UserData = vm.CachedData 时，Html 视图没有改变。你能帮我解决这个问题吗？
没有意义，可能是变量名不对，应该是'vm.CachedUserData'？

【解决方案2】：

= 在 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 中克隆对象。

【讨论】：

对象的浅/深拷贝有angular.copy 或angular.merge。
当然。谢谢你的评论！ :-)
谢谢。它有效，但现在我有一个不同的问题。当我分配 vm.UserData = vm.CachedData 时，HTML 视图没有改变。你能帮我解决这个问题吗？
我认为您应该提供将 UserData 分配给 CachedData 的代码（saveChanges() 函数？）。不管怎样，你还是应该问另一个问题，这和这个问题不同。
好的，非常感谢。