Html 为什么AngularJ会改变不同的变量？

我从api中获取ajax数据并将其保存到变量中。我必须对这些数据进行“编辑并保存”或“编辑并取消”更改。我使用ng模型来显示和编辑这些数据

这是我的剧本：

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>

{{education.SchoolName}
拯救
取消

当用户单击“取消”按钮时，我想写入html缓存数据。 但是 当我尝试访问vm.CachedUserData变量时，我看到这个缓存数据已经用vm.UserData的新值更改了。。。怎么用？我已经检查了我的代码，没有函数访问CachedUserData变量。甚至我把变量名改成了唯一的名称，但结果是一样的

---

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

=

在JavaScript中不会克隆该变量，而是在其上创建另一个指针。这意味着您可以同时使用

vm.UserData

和

vm.CachedUserData

来处理变量。 似乎要克隆变量，因此：

如果是数组：

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

如果是对象：

...
}).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中克隆对象的示例。

=

在JavaScript中不克隆变量，而是在其上创建另一个指针。这意味着您可以同时使用

vm.UserData

和

vm.CachedUserData

来处理变量。 似乎要克隆变量，因此：

如果是数组：

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

如果是对象：

...
}).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中克隆对象的示例。

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

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

---

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

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

---

对于对象的浅/深复制，存在

angular.copy

或

angular.merge

。谢谢你的评论！：-）非常感谢。它起作用了，但现在我有一个不同的问题。当我分配

vm.UserData=vm.CachedData

时，Html视图没有改变。在这方面你也能帮我吗？我想你应该提供将用户数据分配给CachedData的代码（

saveChanges（）

function？）。无论如何，你应该问另一个问题，这是一个不同于这个问题的问题。好吧，非常感谢。有

angular。copy

或

angular。merge

用于对象的浅/深复制。绝对正确。谢谢你的评论！：-）非常感谢。它起作用了，但现在我有一个不同的问题。当我分配

vm.UserData=vm.CachedData

时，Html视图没有改变。在这方面你也能帮我吗？我想你应该提供将用户数据分配给CachedData的代码（

saveChanges（）

function？）。无论如何，您应该问另一个问题，这是一个与此不同的问题。好吧，非常感谢。它起作用了，谢谢，但是当我分配

vm.UserData=vm.CachedData

时，Html视图没有改变。在这个主题上你也能帮我吗？没有意义，可能变量名是错误的，应该是“vm.CachedUserData”？它工作了，谢谢，但是当我分配

vm.UserData=vm.CachedData

时Html视图没有改变。在这方面你也能帮我吗？没有意义，可能变量名是错误的，应该是'vm.CachedUserData'？