Wie man ein angularjs Multi-Step/Wizard-Formular auf einer Seite/URL erstellt

Question

Ich versuche, sinnvolle Ansätze in AngularJS zum Erstellen einer Funktion, die aus mehreren Schritten besteht (dh ein Assistent) aber verknüpft ist eine Seite/URL Die Daten aus einem Schritt müssten Daten an den nächsten Schritt senden (oder mit ihnen teilen).

Die wichtigsten Punkte sind:

• Die URL sollte gleich bleiben (dh http://mydomain/myapp/nameupdater) für alle Schritte und
• die Daten können unter Schritten gesendet werden (dh muss ich geben die Daten aus Schritt 1 zum Auffüllen der Daten in Schritt 2).

Zum Beispiel, nehme an, dass ich eine Funktion haben, die eine Bulk-Aktualisierung von Namen hat:

• In Schritt 1 wird die Funktion macht Sie nach einem Namen suchen.
• In Schritt 2 zeigt die Funktion eine Liste der Namen an, die in Schritt 1 gefunden wurden und dem Benutzer die Bearbeitung ermöglichen.

Ich begann einen Ansatz, bei dem jeder Schritt seine eigene Ansicht und Controller hatte. Und die angular-ui-router behält die Zustände der Funktion bei. Aber ich habe keine Ahnung, wie ich die Daten zwischen den Schritten teilen würde.

Kennt jemand einen guten Ansatz zum Erstellen von Multi-Step/Wizard-Formen in angularjs?

Meine Plunker code is here von meinem sehr schwachen Versuch dies.

Answer 1

Ich denke, der beste Weg, dies zu tun ng-switch, nur ein Controller, eine Route, kein Nachladen zu verwenden wäre, indem in allen Schritten Umgebungsvariablen, wie folgt aus:

<div ng-controller="stepCtrl"> 
    <div ng-switch="step"> 
     <div ng-switch-when="1"> 
     <!-- here you can include your step 1 template, 
       or simply just hardcode it here: --> 
     <div ng-include src="'.../step1.html'"> 
     <button ng-click="setStep(1)"></button> 
     </div> 
     <div ng-switch-when="2"> 

     <div ng-include src="'.../step2.html'"> 
     <button ng-click="setStep(2)"></button> 
     </div> 
     <div ng-switch-when="3"> 
     <div ng-include src="'.../step3.html'"> 
     <button ng-click="setStep(3)"></button> 
     </div> 
    </div> 
</div> 

 yourApp.controller('stepCtrl',function($scope){ 
     $scope.step = 1; 
     $scope.setStep = function(step){ 
      $scope.step = step; 
     } 
     }); 

Auf diese Weise können Sie auch die URL bearbeiten, um einen Schritt am Ende Ihres aktuellen Standorts hinzuzufügen.

UPDATE:

Eigentlich ist diese Antwort vor für lange Zeit ist, diese Tage, die ich persönlich lieber ui-router verwenden, die ein großes Modul, mit dem Sie auf Ihre AngularJS Anwendung injizieren kann und machen es sogar mit verschachtelten kühlere Ansichten. Apropos verschachtelte Ansichten, unten ist mein neuer Ansatz für eine multystep Form mit einigen Animation:

Erstens:

Using $stateProvider declare any steps you want in separate views : 

app.config(function($stateProvider, $urlRouterProvider) { 

$stateProvider 

    .state('wizard', {// this will be the wrapper for our wizard 
     url: '/wizard', 
     templateUrl: 'wizard.html', 
     controller: 'wizardController' 
    }) 
    .state('wizard.stepOne', {// this will be the wrapper for our wizard 
     url: '/stepOne', 
     templateUrl: 'stepOne.html', 
     controller: 'wizardController' 
    }) 
    .state('wizard.stepTwo', {// this will be the wrapper for our wizard 
     url: '/stepTwo', 
     templateUrl: 'stepTwo.html', 
     controller: 'wizardController' 
    }) 

Dann später in unserem „wizard.html“ wir so etwas wie dieses haben kann:

<div id="container"> 

    <div> 
     <h2>Our multistep form wizard</h2> 


     <div id="status-buttons" class="text-center"> 
      <a ui-sref-active="active" ui-sref=".stepOne"><span>1</span> Step One</a> 
      <a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span> Step Two </a> 

     </div> 
    </div> 
    <!-- Here we specify our view that is a container for our subviews(steps) , which in our case can be a form !--> 

    <form id="signup-form" ng-submit="submit()"> 
     <!-- nested state views will be inserted here --> 
     <div ui-view></div> 
    </form> 

</div> 

Und offensichtlich für unsere Schritte müssen wir HTML-Dateien getrennt haben. Auf diese Weise haben wir immer noch einen Controller, URL wird aktualisiert, und wir können auch Winkelanimation hinzufügen.