在单页web应用程序中一次只显示特定的表单

showing only certain form at a time in single-page web app

本文关键字：显示 一次 表单 web 单页 应用程序      更新时间：2023-09-26

我有一个包含多个表单的单页web应用程序。根据用户在两个按钮（"下一步"或"上一步"）之间单击的内容，我希望显示不同的步骤。假设我看到一个对应于步骤1的表单。如果我单击"下一步"按钮，我希望看到与步骤2相对应的表格。

我有如下index.html代码：

<form name="form" novalidate ng-submit="submitStep1()" ng-show="step == 1">
  //multiple inputs
</form>
<form name="form" novalidate ng-show="step == 2">
  //multiple inputs
</form>

submitStep1功能如下：

  $scope.submitStep1 = function () {
    if ($scope.form.$valid) {
      $scope.step = 2;
    }
  };

每当点击提交按钮时，我都会增加步骤数。问题是，我试图添加2个按钮，如上所述，这样我就可以增加或减少步数。然而，ng-submit似乎只能使用一个功能（这意味着即使我添加了两个按钮，也只能触发一个功能）。解决方案是什么？

如果你有两个按钮，那么每个按钮都必须有不同的功能，

var count=1;
function nextStep(){
count=count++;
}
function previousStep(){
count=count--;
}

在您的html中，将这些函数绑定到每个函数

<button class="btn btn-primary" ng-click="previousStep()">Previous</button>
<button class="btn btn-primary" ng-click="nextStep()">Next</button>

您可以在表单标签的末尾制作下一个按钮

<form name="form" novalidate ng-submit="submitStep1()" ng-show="step == 1">
   //multiple inputs
</form>
<form name="form" novalidate ng-show="step == 2">
    //multiple inputs
</form>
<input type="button" ng-click="movenext()"/>
<input type="button" ng-click="moveprevious()"/>

在此按钮中处理表单代码之间的切换，并为每个表单分配不同的表单名称

相关文章：