在AngularJS中与服务器同步时，保留表单上的浏览器状态

Retaining browser state on form when synchronising with server in AngularJS

本文关键字：表单 保留 状态 浏览器 AngularJS 服务器 同步      更新时间：2023-09-26

我有一个HTML表单，它由一个名为a的对象的ngModel支持。当用户在表单中输入数据时，服务器上的资源会使用PUT请求进行更新。我需要使用服务器从该请求返回的数据来更新/替换我的本地数据，因为像lastModified这样的东西会发生变化。

替换像a = b这样的整个对象（其中b是服务器响应）会导致整个HTML表单重新呈现，因为就ngModel而言，它有一个全新的对象。这也很糟糕，因为这意味着，如果用户有一个聚焦的输入，那么在表单重新渲染时，该输入将失去焦点。

我已经编写了一个函数来递归地添加/删除/更新a对象上的键，同时保留所有引用，从而避免了重新渲染。然而，我有一种感觉，这是一个糟糕的方法。这是Angular中的一个常见问题吗？否则我该如何解决它？还是我做错了什么？

更新：我的表单上没有ngModel。相反，表单是ngRepeat内部的迭代元素。

首先要澄清的是，我希望您的表单上没有ngModel，而是表单的每个输入上？

现在来谈谈有用的一点：你知道angular。extend吗？它用于通过源对象的值来扩展目标对象，同时保留引用。参考你的"a"-对象和"b"响应对象，它可以简单到：

angular.extend(a, b);

还有一个功能更强大的同名jQuery。（不过，当您使用jQuery时，不要忘记您的摘要/应用程序调用）。

http://docs-angularjs-org-dev.appspot.com/api/angular.extend

您可能还想研究以更结构化的方式处理资源。这个比特应该特别感兴趣：

重要的是要意识到，调用$resource对象方法会立即返回一个空引用（对象或数组取决于isArray）。从服务器返回数据后，将使用实际数据填充现有引用。这是一个有用的技巧，因为通常资源被分配给模型，然后由视图进行渲染。如果对象为空，则不会进行渲染，一旦数据从服务器到达，就会用数据填充对象，视图会自动重新渲染自己，显示新数据。

http://docs-angularjs-org-dev.appspot.com/api/ngResource.$resource

相关文章：