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:

Where should I store the status of his choices? Cookie? Session?
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?

BTW, I am using Rails as a backend.

I have based my question on this tutorial: http://code.realcrowd.com/the-wonderful-wizard-of-angularjs/

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

Do you need the data to persist? . I mean, could the user navigate out of the page and come back at, say, the third form? — GonchuB
– GonchuB, Commented Apr 6, 2014 at 2:55
You can just have all the forms in 1 page, once the user clicks submit on one form & validates, ng-show the next form, ng-hide the current form, etc. Store all the answers in 1 $scope variable (hash most likely). At the end, send the hash as JSON to the backend. 1 controller, multiple validation functions. Monolithic, but gets the job done if you don't need reuse. — Foo L
– Foo L, Commented Apr 6, 2014 at 5:43

Chandermani · Accepted Answer · 2014-04-06 09:55:52Z

2

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.

answered Apr 6, 2014 at 9:55

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

StarTrek18 Over a year ago

Thanks Chandermani. I think it makes sense now. However, I would like to know what to do when the user submits the form. I know that the way of thinking in AngularJS is to try not to modify the DOM. So, what do I do on submit? Which action of the form, and would I low the new form into the page?

Chandermani Over a year ago

You keep collecting the information in the service model, and when you are ready to submit data to server, user the $http or $resource service to post the data as json to server.

StarTrek18 Over a year ago

Yes, but after each form (or page), the user needs to submit the data to go to the next form, right? That's my concern. How would I go to the next form? (what to do with the data once user clicks Next, and how to hide current form to show the next one)

Chandermani Over a year ago

Don't know about your app design. But you can use the ng-view and routing service to move from one form to another.

StarTrek18 Over a year ago

Chandermani, but if I have N forms, what would be the action for the first one for example? Or you are considering placing those <input> elements without a form?

|

morloch · Accepted Answer · 2014-04-06 03:08:59Z

0

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:

Plnkr example of three pages and a model

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.

answered Apr 6, 2014 at 3:08

morloch

1,8862 gold badges17 silver badges24 bronze badges

Collectives™ on Stack Overflow

Store status between forms in AngularJS?

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related