Comment faire un angularjs multi-étape/assistant de formulaire sur une page/url
j'essaie de trouver des approches raisonnables dans AngularJS pour créer une fonction qui est composée de plusieurs étapes (i.e., un assistant) mais est liée à une page/URL. Les données d'une étape devraient être envoyées à (ou partagées avec) l'étape suivante.
Les principaux points sont les suivants:
- l'url doit rester la même (i.e.,
http://mydomain/myapp/nameupdater) pour toutes les étapes et, - les données peuvent être envoyées par étapes (i.e., je dois donner les données trouvées à partir de l'étape 1 pour remplir les données dans l'étape 2).
Par exemple supposons que j'ai une fonction qui fait une mise à jour en bloc de noms:
- À l'étape 1 de la fonction, vous rechercher un nom.
- à l'étape 2, la fonction présente une liste des noms trouvés à l'étape 1 et permet à l'utilisateur de les modifier.
j'ai commencé une approche où chaque pas avait sa propre vue et son contrôleur. Et, le angular-ui-router maintenu les états de fonction. Mais, je n'ai aucune idée de comment je pourrais partager les données entre les étapes.
est-ce que quelqu'un connaît une bonne approche pour établir des formulaires multi-étapes/magiciens à angularjs?
Plunker code ici de ma très faible tentative à ce sujet.1 réponses
je pense que la meilleure façon de le faire serait d'utiliser ng-switch, juste un contrôleur, un itinéraire, pas de rechargement, à l'aide de variables partagées dans toutes les étapes, comme ceci:
<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;
}
});
de Cette façon, vous pouvez également manipuler l'URL pour ajouter une étape à la fin de votre emplacement actuel.
mise à jour:
en fait cette réponse est pour il y a longtemps , ces jours je préfère personnellement utiliser ui-router qui est un grand module que vous pouvez injecter à votre application AngularJs et le rendre encore plus cool avec des vues emboîtées . En parlant de vues imbriquées, voici ma nouvelle approche pour un formulaire multystep avec une certaine animation:
le Premier :
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'
})
Puis plus tard dans notre "de l'assistant.html" nous pouvons avoir quelque chose comme ceci :
<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>
et évidemment pour nos pas, nous devons avoir des fichiers html séparés. De cette façon , nous avons toujours un controller , url sera mis à jour , et on peut aussi ajouter l'animation angulaire .