AngularJS Multistep Form單頁應用程序

Question

我正在使用AngularJS創建一個多步驟表單。 我不知道如何獲得上一步。 我的表格流是兩種方式。 可以通過A方法 step1-> step2-> step3-> step4從步驟1轉到步驟4，而B方法是step1-> step3-> step4。 我使用<button class="SubmitPrev" ng-click="step = 1">Prev</button>代碼獲取上一步。 但是，當用戶經過A方式時，步驟3的先前步驟應為step2，而通過B方式，則步驟3的先前步驟應為step1。 在step3中，我無法使用我以前的按鈕代碼，因為step3的上一步取決於用戶的進出方式。 我也嘗試創建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步驟形式

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 個解決方案

解決方案1
0 2016-03-30 11:56:57

解決方案2
0 2016-03-30 12:05:13

AngularJS Multistep Form單頁應用程序

問題描述

2 個解決方案

解決方案1 0 2016-03-30 11:56:57

解決方案2 0 2016-03-30 12:05:13

解決方案1
0 2016-03-30 11:56:57

解決方案2
0 2016-03-30 12:05:13