在AngularJS中的表单之间存储状态？答案

【问题标题】：Store status between forms in AngularJS?在AngularJS中的表单之间存储状态？
【发布时间】：2014-04-06 02:26:00
【问题描述】：

我会尽量做到具体。这就是我想要完成的：

我希望能够向用户展示哪种鞋适合其需求。将向用户显示 4 个表单，一次一个。

我的想法是显示一个表单，一旦用户单击“下一步”，保存该状态并显示下一个表单。填写完所有表单后，使用这些选项来获取 API 并将结果返回给用户。

这是我的问题：

顺便说一句，我使用 Rails 作为后端。

我看到他在提交时使用了 saveState()，但我不确定该函数是在哪里定义的。

【问题讨论】：

您可以使用localStorage api。
您需要数据持久化吗？ .我的意思是，用户可以离开页面并返回到第三个表单吗？
您可以只将所有表单放在一页中，一旦用户单击提交一个表单并验证，ng-show 下一个表单，ng-hide 当前表单等。存储所有答案在 1 $scope 变量中（很可能是散列）。最后，将哈希作为 JSON 发送到后端。 1个控制器，多重验证功能。单片，但如果您不需要重用，就可以完成工作。

【解决方案1】：

由于应用程序是 Angular SPA，您可以使用 Angular 服务来存储用户所做选择的状态。这种状态会一直持续到用户明确刷新浏览器 (F5)。

创建一个类似的服务

angular.factory('shoeSelectionState',function() {
   var states=[{selection:{}},{selection:{}},{selection:{}},{selection:{}}];
   return states;
});

在你的控制器中注入这个服务，

angular.controller('MyController', function(shoeSelectionState) {
   $scope.states=shoeSelectionState;
});

并将状态数组绑定到每个表单元素，例如

<input type='text' ng-model='states[0].selection.size' name='size'>

如果您想在页面刷新时保留数据，请尝试使用sessionStorage 而不是localStorage，因为当用户关闭选项卡时它会自动清除。上面提到的服务可以做内容到存储的持久化。

【讨论】：

谢谢钱德曼尼。我觉得现在说得通。但是，我想知道当用户提交表单时该怎么做。我知道 AngularJS 的思维方式是尽量不去修改 DOM。那么，提交时我该怎么办？表单的哪个动作，我会将新表单放到页面中吗？
您在服务模型中不断收集信息，当您准备好向服务器提交数据时，使用$http 或$resource 服务将数据以json 格式发布到服务器。跨度>
是的，但是在每个表单（或页面）之后，用户需要提交数据才能进入下一个表单，对吧？这是我的担心。我将如何进入下一个表格？（用户点击下一步后如何处理数据，以及如何隐藏当前表单以显示下一个）
不了解您的应用设计。但是您可以使用ng-view 和路由服务从一种形式转移到另一种形式。
Chandermani，但是如果我有 N 个表格，例如第一个表格的操作是什么？或者您正在考虑放置那些没有表单的元素？

【解决方案2】：

您可以按照@sumain-bogati 的建议使用 localStorage，但您也可以轻松地做到这一点，而无需重新加载任何页面。您将需要一个带有控制器的容器，该控制器将存储用户的选择（即模型），然后使用 ngShow 或 ngRoute 显示每个页面。下面是一些示例代码：

您将调用一个函数，而不是调用第四个页面，该函数将启动对后端 API 的 $http 调用以提交模型值。

【讨论】：