Comment faire un angularjs multi-étape/assistant de formulaire sur une page/url
Je suis à essayer de comprendre approches raisonnables dans AngularJS pour la création d'une fonction qui est composée de plusieurs étapes (c'est à dire, un assistant), mais est liée à une page de l'URL. Les données d'une étape aurait pour envoyer des données (ou de partager des données avec) l'étape suivante.
Les principaux points sont:
- l'url doit rester le même (c'est à dire,
http://mydomain/myapp/nameupdater
) pour toutes les étapes et, - les données peuvent être transmises entre les étapes (c'est à dire, que j'ai à donner les donné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 de la fonction présente une liste de noms, qui ont été trouvés à partir de l'étape 1 et permet à l'utilisateur de les modifier.
J'ai commencé une approche où chaque étape a son propre point de vue et le contrôleur. Et, le angular-ui-router
maintenu les membres de la fonction. Mais, je n'ai aucune idée de comment je pourrais partager les données entre les étapes.
Personne ne sait d'une bonne approche de l'établissement multi-étape/assistant formes dans angularjs?
Mon Plunker code est ici de ma très faible tentative à cet égard.
- Lire ceci.
- Pourrait aider à poser une question précise avec le code exemple à la place de vaste.
- Je suis d'accord. Si j'avais une question spécifique à l'esprit, alors je voudrais la poser. Mais, je suis à la recherche d'une approche. Je ne sais juste pas comment un multi-étape/assistant type de situation est gérée dans angularjs sans l'aide de différentes url.
- Vous pouvez gérer facilement les données d'état dans un délai d'un contrôleur à l'aide d'un service ou même juste une simple variable.
- Ok, je pense que je vais voir comment cela devrait se réunir en fonction de vos suggestions et de cet exemple d'un assistant. Comme vous l'avez mentionné, un contrôleur a plus de sens. Je vais essayer cela.
- Exemple Simple: plnkr.co/modifier/g2T0r6MPzalkwADPen59?p=preview Vous pouvez bien sûr diffuser/émettent des changements (comme le lien que vous avez posté), mais il n'a pas à être compliqué.
- J'ai aussi recommandons l'utilisation d'un seul contrôleur pour mettre toutes les étapes. Vous pouvez externaliser la fonctionnalité, en plus, des services et des directives pour améliorer la maintenabilité.
- vous pouvez utiliser un singleton modèle pour tenir les données à partir de toutes les étapes dont vous avez besoin pour soumettre normalement à la dernière étape: stackoverflow.com/questions/20930540/...
Vous devez vous connecter pour publier un commentaire.
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:De cette façon, vous pouvez également manipuler l'URL pour ajouter une étape à la fin de votre emplacement actuel.
Mise à JOUR :
Fait cette réponse, c'est pour longtemps , à ce jours, je préfère personnellement utiliser l'interface utilisateur du routeur qui est un excellent module qui vous pouvez injecter à votre AngularJs application et la rendre encore plus cool avec des vues imbriquées .
En parlant de vues imbriquées , le soufflet est ma nouvelle approche pour un multystep forme avec une certaine animation :
Première :
Puis plus tard dans notre "wizard.html" nous pouvons avoir quelque chose comme ceci :
Et, évidemment, pour nos mesures , nous devons avoir séparés des fichiers html.
De cette façon , nous avons encore un contrôleur , l'url sera mis à jour , et nous pouvons également ajouter angulaire de l'animation .