如何在一页/url上做一个angularjs多步/向导表单 [英] How to do an angularjs multi-step/wizard form on one page/url

问题描述

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

主要有以下几点:

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

例如，假设我有一个函数可以批量更新名称:

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

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

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

我的Plunker 代码在这里，这是我在这方面的非常弱的尝试.

解决方案

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

<div ng-controller="stepCtrl"><div ng-switch="step"><div ng-switch-when="1"><!-- 在这里您可以包含您的第 1 步模板，或者只是在这里硬编码:--><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 = 函数(步骤){$scope.step = 步；}});

通过这种方式，您还可以操纵 URL 以在当前位置的末尾添加一个步骤.

更新:

其实这个答案是很久以前的了，这几天我个人更喜欢使用 ui-router 这是一个很棒的模块，您可以将其注入到您的 AngularJs 应用程序中，并通过嵌套视图使其更加酷.说到嵌套视图，下面是我对带有一些动画的多步表单的新方法:

第一:

使用 $stateProvider 在单独的视图中声明您想要的任何步骤:app.config(function($stateProvider, $urlRouterProvider) {$stateProvider.state('wizard', {//这将是我们向导的包装器url: '/向导',templateUrl: 'wizard.html',控制器:'wizardController'}).state('wizard.stepOne', {//这将是我们向导的包装器url: '/stepOne',templateUrl: 'stepOne.html',控制器:'wizardController'}).state('wizard.stepTwo', {//这将是我们向导的包装器url: '/stepTwo',templateUrl: 'stepTwo.html',控制器:'wizardController'})

然后在我们的wizard.html"中我们可以有这样的东西:

 <div id="container">
<h2>我们的多步表单向导</h2><div id="status-buttons" class="text-center"><a ui-sref-active="active" ui-sref=".stepOne"><span>1</span>第一步</a><a ui-sref-active="active" ui-sref=".stepTwo"><span>2</span>第二步</a></div></div><!-- 这里我们指定我们的视图，它是我们的 subviews(steps) 的容器，在我们的例子中它可以是一个表单！--><form id="signup-form" ng-submit="submit()"><!-- 嵌套状态视图将插入此处--><div ui-view></div></表格></div>

显然，对于我们的步骤，我们必须有单独的 html 文件.这样，我们还有一个控制器，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.

The main points are:

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

• In step 1 the function makes you search for a name.
• In step 2 the function presents a list of names that were found from step 1 and allows the user to edit them.

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.

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

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

解决方案

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

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

UPDATE :

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 :

First :

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

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>

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 .

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