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

Store status between forms in AngularJS?

本文关键字：之间 状态 表单 存储 AngularJS      更新时间：2023-09-26

我将尽可能具体。这就是我想要完成的：

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

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

以下是我的问题：

  • 我应该在哪里存储他的选择的状态？饼干？会期？
  • 我将如何组织 Angular 以使所有这些表单一个接一个地显示？有什么资源可以作为灵感吗？

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

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

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

由于应用是角度 SPA，因此可以使用角度服务来存储用户所做的选择的状态。此状态将一直持续到用户显式刷新浏览器 （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，因为当用户关闭选项卡时，它会自动清除。上面提到的服务可以将内容持久化到存储。

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

三个页面和一个模型的 Plnkr 示例

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

相关文章：