Question

我从api获取ajax数据并将其保存到变量中。我必须＆＃34;编辑并保存＆＃34;或＆＃34;编辑并取消＆＃34;这些数据的变化。我正在使用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数据的所有变量？

Answer 1

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

以下是用于克隆JS中对象的good link。

Answer 2

我建议您使用angular.copy（）来绑定要缓存的数据：

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

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

2 个答案: