在AngularJS中更改视图后如何保留表单的旧值

Question

我有一些输入字段，例如单选按钮、文本框、下拉列表、由用户填写的文本字段，单击按钮会打开一个新的视图页面。现在按下后退按钮时，我想显示用户之前选择或给出的那些旧值。

如何在 AngularJS 中做到这一点？

Answer 1

如果您有一个表单，那么您很可能正在使用 ng-model 来存储这些值。当您离开页面时，您可以使用该“对象”并将其与 ng-route/ui-route 中的状态参数一起传递，并在您返回页面时恢复它们。

或者，您可以使用服务来存储它然后检索它。更好的方法可能是 ng-route/ui-route 方法。

编辑：正如 alon 所评论的，我应该更积极一些，这里是一个例子：

状态1，ui-router（例如config.routes.js）：

.state('state_one', {
  name: 'state1',
  params: {
    formData: {}
  }
})

您的表单中将包含 ng-model，因此我们假设它被称为“formobj”，具有这种命名结构的每个输入/文本区域的属性：

formobj.input1, formobj.input2

当您离开状态 1 的页面（您的表单页面）进入状态 2 时，您会在控制器中执行以下操作：

$state.go('state_two', { formData: formobj })

所以我们将 'formobj' 直接传递给 state_two，就像 state_one 一样：

.state('state_two', {
  name: 'state2',
  params: {
    formData: {}
  }
})

所以在两者的控制器中，访问 formobj 很简单：

$stateParams.formData

当您回到表单所在的原始 state_one 时，您仍然在传递 formobj，然后您可以再次将其用作模型（即在您移动之前从表单中获得的所有值另一个页面/状态）。即：

formobj = $stateParams.formData