如何在一个页面/网址上执行angularjs多步/向导表单

Question

我试图在AngularJS中找出合理的方法来创建一个由多个步骤(即向导)组成的函数,但是它链接到一个页面/ URL.一步的数据必须向下一步发送数据(或与之共享数据).

要点是:

• http://mydomain/myapp/nameupdater所有步骤的网址应保持不变(即),
• 数据可以在步骤之间发送(即,我必须提供从步骤1中找到的数据来填充步骤2中的数据).

例如,假设我有一个执行名称批量更新的函数:

• 在步骤1中,该功能使您搜索名称.
• 在步骤2中,该函数显示从步骤1中找到的名称列表,并允许用户编辑它们.

我开始采用一种方法,每个步骤都有自己的视图和控制器.并且,angular-ui-router维持了功能的状态.但是,我不知道如何在各步骤之间共享数据.

有没有人知道在angularjs中建立多步/向导表单的好方法？

我的Plunker代码是我对此非常微弱的尝试.

Answer 1

我认为这样做的最好方法是使用ng-switch,只需一个控制器,一个路由,无需重新加载,使用在所有步骤中共享的变量,如下所示:

<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以在当前位置的末尾添加步骤.

更新:

实际上这个答案很久以前,这个天我个人更喜欢使用ui-router这是一个很好的模块,你可以注入你的AngularJs应用程序,并使嵌套视图更酷.说到嵌套视图,bellow是我使用一些动画的多系统表单的新方法:

第一:

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"中我们可以得到这样的东西:

    <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将被更新,我们还可以添加角度动画.