23906

Store status between forms in AngularJS?

Question:

I am going to try to be as specific as I can. This is what I am trying to accomplish:

I want to be able to show a User, which kind of shoes fit its needs. The user will be shown 4 forms, one at a time.

My idea is to show a form, and once the user clicks 'Next', save that status and show the next form. After all forms have been filled, use those choices to fetch the API and return results to the User.

Here are my questions:

<ul><li>Where should I store the status of his choices? Cookie? Session?</li> <li>How would I organize Angular in order to have all these forms that are shown one after the other? Any resources that I could use as an inspiration?</li> </ul>

BTW, I am using Rails as a backend.

I have based my question on this tutorial: <a href="http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/" rel="nofollow">http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/</a>

I see that he uses saveState() on submit, but I am not sure where that function is defined.

Answer1:

Since the app is a angular SPA, you can use a angular service to store the state of the selection made by user. This state would persist until user explicitly refreshes the browser (F5).

Create a service like

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

In your controller inject this service,

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

and bind the states array to each form elements, something like

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

If you want to persist the data on page refresh try using sessionStorage instead of localStorage as it gets automatically cleared when user closes the tab. The service mentioned above can do the persistence of the content to storage.

Answer2:

You could use localStorage as @sumain-bogati suggested, but you could just as easily do this without any page reloads. What you will need is a container with a controller that will store the user's choices (i.e. the model) and then use ngShow or ngRoute to display each page. Here is some example code:

<a href="http://plnkr.co/edit/MySTSiYNJeHkRSN9Chvu" rel="nofollow">Plnkr example of three pages and a model</a>

Instead of calling the fourth page, you would call a function which would initiate an $http call to your backend API to submit the model values.

Recommend

  • How to use a controller in an other file in Angularjs
  • TypeError: api.getAll is not a function, service method is not recognized
  • AngularJS is breaking the routing url
  • Wait for angular to finish updating the DOM
  • Find substring in string using locale
  • Javascript inside script tag in an Angularjs template is not executed
  • Majority function in SQL
  • Bullet-Proof ACL using AngularJS
  • How do I create a new row inside an angular ng-repeat?
  • In a MEAN stack, how can I do one-time MongoDB indexing?
  • Python PIL remove sections of an image based on its colour
  • What's an elegant way of accessing parent controller's member from child controller?
  • Angular2 & SystemJS : Cannot find module while building a moduleLoader
  • Accessing 3rd level of JSON with Angular ng-repeat
  • Consuming a web service with the Netbeans Platform
  • Slicing an SPA into several components and use AngularJS
  • to implement a spinner in angular2+
  • jersey/tomcat Description The origin server did not find a current representation for the target res
  • Bash if statement with multiple conditions
  • JBoss External Properties Files in Classpath
  • Content-Length header not returned from Pylons response
  • Use of this Javascript
  • Meteor helpers not available in Angular template
  • C++ Partial template specialization - design simplification
  • Ajax Loaded meta Tags
  • Xamarin Forms - UWP Fonts
  • javaw.exe and eclipse startup problems
  • Arrow is showed instead of the material design version hamburger icon. Why doesn't syncState in
  • How to get next/previous record number?
  • Arrays break string types in Julia
  • How to get icons for entities from eclipse?
  • Python: how to group similar lists together in a list of lists?
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • need help with bizarre java.net.HttpURLConnection behavior
  • Turn off referential integrity in Derby? is it possible?
  • How can I remove ASP.NET Designer.cs files?
  • Add sale price programmatically to product variations
  • JaxB to read class hierarchy
  • java string with new operator and a literal