CODEWITHSUNDEEP
angularjs
mr1031011
mr1031011

Reputation: 3812

Multiple steps form (Wizard) with ui-router?

I'm trying to build a multiple step form (wizard) with angular js.

As I understand, I have to map each step to its own controller and view (template). But it seems to me that if I do it then the model defined in each step view will be limited to the scope of the particular controller only.

Since I would like to submit all data filled in all steps at the end of the form, I wonder how should I code to make sure the model(s) is shared across all steps?

Upvotes: 1

Views: 3087

Answers (1)

Chandermani
Chandermani

Reputation: 42669

What i would suggest to you would be to expose your model to each of the steps using a service\factory. Each step can access the model exposed by the factory and updates that model. Your factory would look like something 

angular.module("myApp").factory("Wizard",[function() {
     function WizardModel() {
         //Model Properties
         this.title="Test"   
     }
     var wizardService={};
     wizardService.model=new WizardModel();
     wizardService.init=function() {
         //instantiate a new model object wizardService.model={};
     }
     return wizardService;

}])

You can now inject this service in you controller. Before starting the wizard call init to reinitialize the model and use the model property to get the current model.

Upvotes: 1

Related Questions