Question

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

要点是：

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

例如，假设我有一个功能可以批量更新名称：

在第1步中，该功能会让您搜索名称。
在第2步中，该函数显示了从步骤1中找到的名称列表，并允许用户对其进行编辑。

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

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

我Plunker code is here对我的非常微弱的尝试。

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

然后在我们的＆＃34; wizard.html＆＃34; 中，我们可以这样：

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

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

1 个答案: