javascript - 在 AngularJS 中存储表单之间的状态？

Question

我将尽力做到具体。这就是我想要实现的目标:

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

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

这是我的问题:

• 我应该在哪里存储他的选择状态？曲奇饼？ session ？
• 我将如何组织 Angular 以便让所有这些表单依次显示？有什么资源可以作为我的灵感来源吗？

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

我的问题基于本教程:http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/

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

Answer 1

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

创建一个类似的服务

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

在您的 Controller 中注入(inject)此服务，

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

并将 states 数组绑定(bind)到每个表单元素，类似于

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

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