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

时间:2013-07-11 21:19:50

标签: javascript api angularjs

我有一个HTML表单,该表单由名为ngModel的{​​{1}}对象支持。当用户在表单中输入数据时,将使用PUT请求在服务器上更新资源。我需要使用服务器从此请求返回的数据来更新/替换我的本地数据,因为a之类的内容会发生变化。

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

我编写了一个函数来递归地添加/删除/更新我的ngModel对象上的键,同时保留所有引用,从而绕过重新呈现。但我觉得这是一个糟糕的方法。这是Angular中的常见问题,我还能如何解决它?或者我做错了什么?

更新:我的表单上没有a。相反,表单是ngModel内的迭代元素。

1 个答案:

答案 0 :(得分:1)

首先澄清 - 我希望你的表单上没有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。$资源