如何做一个angularjs多步骤/向导的形式在一个页面上/ URL [英] How to do an angularjs multi-step/wizard form on one page/url

问题描述

我试图找出在AngularJS合理​​的方法来创建是由多个步骤（即向导），但链接到一个网页/ URL的功能。从一个步骤中的数据将不得不将数据发送到（或具有共享数据）的下一个步骤。

I'm trying to figure out reasonable approaches in AngularJS for creating a function that is composed of multiple steps (i.e., a wizard) but is linked to one page/URL. The data from one step would have to send data to (or share data with) the next step.

要点是：

• 的URL应该保持不变（即的http：// MYDOMAIN / MyApp的/ nameupdater ）的所有步骤和


• 可以将数据之间发送的步骤（即，我得给从步骤1中找到填充在步骤2中的数据的数据）。

• the url should remain the same (i.e., http://mydomain/myapp/nameupdater) for all of the steps and,
• the data can be sent amongst steps (i.e., I have to give the data found from step 1 to populate the data in step 2).

例如，假设我有不名的批量更新功能：

For example, suppose that I have a function that does a bulk update of names:

• 在步骤1中的功能，使得您搜索的名称。


• 在步骤2中的函数presents从步骤1中发现，并允许用户编辑它们名称的列表。

我开始了一个方法，即每一步都有自己的视图和控制器。而且，角UI路由器维持功能的状态。但是，我不知道我怎么会共享步骤之间的数据。

I started an approach where each step had its own view and controller. And, the angular-ui-router maintained the states of the function. But, I have no idea how I would share the data between the steps.

有谁知道一个好方法，在angularjs建立多步/向导形式的？

Does anyone know of a good approach to establishing multi-step/wizard forms in angularjs?

Plunker code是这里我在这个非常微弱的尝试。

My Plunker code is here of my very weak attempt at this.

推荐答案

我觉得这样做的最好方法是使用 NG-开关，只是一个控制器，一航，不重装，使用所有步骤共享变量，像这样的：

I think the best way of doing this would be to use ng-switch, just one controller, one route, no reload, using variables shared in all steps, like this:

<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;
        }
      });

此方式，您还可以操纵的URL显示在当前位置的末尾添加了一步。

This way you can also manipulate the URL to add a step at the end of your current location.

更新：

其实这个答案是很久以前的事，这几天我亲自preFER使用 UI路由器这是一个伟大的模块，你可以注入到你的AngularJs应用程序，并使其更具有嵌套视图凉爽。
说到嵌套视图，波纹管是我与一些动画multystep形式新方法：

Actually this answer is for long time ago , this days I personally prefer to use ui-router which is a great module which you can inject to your AngularJs application and make it even more cool with nested views . Speaking of nested views , bellow is my new approach for a multystep form with some animation :

首先：

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'
    })

再后来在我们的wizard.html的我们能有这样的事情：

Then later in our "wizard.html" we can have something like this :

    <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>

和显然对我们的脚步，我们必须有分隔的HTML文件。
通过这种方式，我们还有一个控制器，URL将被更新，而且我们还可以添加角动画。

And obviously for our steps , we must have seperated html files. This way , we still have one controller , url will be updated , and we can also add angular animation .

这篇关于如何做一个angularjs多步骤/向导的形式在一个页面上/ URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！