Question

我正在使用AngularJS创建一个多步骤表单。我没有得到如何进行上一步。我的表格流程是双向的。可以通过 A way step1 - ＆gt; step2 - ＆gt; step3 - ＆gt; step4 和 B方式从第1步到第4步是step1 - ＆gt; step3 - ＆gt; step4。我使用<button class="SubmitPrev" ng-click="step = 1">Prev</button>代码来获取上一步。但是当用户按 A方式进行时，则步骤3的上一步应该是步骤2，并且通过 B方式，步骤3的上一步应该是步骤1。在第3步中，我无法使用我之前的按钮代码，因为步骤3的上一步取决于用户的来往方式。我也尝试创建step3的别名，但它增加了行数，因为我的表单包含许多方法的许多步骤。还有其他方法可以调用上一步吗？

// Code goes here

var app = angular.module("MyApp", []);
 
  app.controller('MyCtrl', function($scope, $timeout) {	       	

  	 		 $scope.name = '';    
  	 	 	 $scope.data = {
   		 singleSelect: null,
    		 multipleSelect: [],
    		 option1: 'option-1',
   		};
		   $scope.forceUnknownOption = function() {
     		$scope.data.singleSelect = 'nonsense';
   		};

  });

<!DOCTYPE html>
<html ng-app="MyApp" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body ng-controller="MyCtrl">

<form name='myform' id="myform" ng-init="step = 1" ng-submit="submitForm(myform.$valid)">

<div ng-show="step==1">
<h3>Which step</h3>
<div ng-form='step1form'>
<input type="radio" ng-disabled="!step1form.$valid" ng-click="step = 2"><p>Step 2</p>
<input type="radio" ng-disabled="!step1form.$valid" ng-click="step = 3"><p>Step 3</p>
</div>
</div>

<div ng-show="step==2">
<h3 class="zoomIn">which step</h3>
<div ng-form='step2form'>
<input type="radio" ng-disabled="!step2form.$valid" ng-click="step = 3"><p>Step 3</p>
<button  class="SubmitPrev" ng-click="step = 1">Prev</button>
</div>
</div>

<div ng-show="step==3">
<h3 class="zoomIn">which step</h3>
<div ng-form='step3form'>
<input type="radio" ng-disabled="!step3form.$valid" ng-click="step = 4"><p>Step 4</p>
</div>
</div>

<div ng-show="step==4">
<h3 class="zoomIn">which step</h3>
<div ng-form='step4form'>
<p>Finish</p>
</div>
</div>

</form>

<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="script.js"></script>
</body>
</html>

Answer 1

您可以使用：Angular Multi step form

multiStepForm是一个角度模块，用于创建多步骤表单和向导。创建您的步骤，就像使用ngRoute或ui-router创建视图一样！

一些主要特征：

步骤是受控制的视图，并且易于配置
步骤的隔离或非隔离范围
跟踪步骤有效性，如果它包含表格

Answer 2

将当前和上一步骤存储在控制器中。因此，单击上一步按钮时，将当前步骤设置为上一步。

如果这没有意义，请告诉我，我会提供一个Plunker。

这是一个快速的Plunker来演示：

https://plnkr.co/edit/ofha6qAyNgJZj7XQ5Zk7?p=preview

HTML：

<body ng-controller="MainCtrl as main">
    <div ng-if="currentStep == 1">
      <h1>Step 1</h1>
      <button ng-click="setStep(2)">Go to step 2</button>
      <button ng-click="setStep(3)">Jump to step 3</button>
    </div>

    <div ng-if="currentStep == 2">
      <h1>Step 2</h1>
      <button ng-click="setStep(3)">Go to step 3</button>
    </div>

    <div ng-if="currentStep == 3">
      <h1>Step 3</h1>
    </div>

    <br>
    <button ng-if="previousStep > 0" ng-click="setStep(previousStep)">Go to your previous step ({{previousStep}})</button>
    <button ng-if="currentStep > 1" ng-click="setStep(currentStep - 1)">Go to {{currentStep - 1}}</button>
</body>

JS：

var app = angular.module('angularApp', []);

app.controller('MainCtrl', function($scope, $http) {
  $scope.currentStep = 1;
  $scope.previousStep = 0;

  $scope.setStep = function(step) {

    if (step == 1) { // If first step hide previous button
      $scope.previousStep = 0;
    } else {
       $scope.previousStep = $scope.currentStep;
    }

    $scope.currentStep = step;
  }
});

AngularJS Multistep Form单页面应用程序

2 个答案: