javascript - 在单页网络应用程序中一次仅显示某种形式

Question

我有一个包含多个表单的单页网络应用程序。 根据用户在两个按钮之间单击的内容(“下一步”或“上一步”)，我想显示不同的步骤。假设我看到了与步骤 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 只能采用一个功能(这意味着即使我添加 2 个按钮，也只会触发一个功能)。解决这个问题的办法是什么？

Answer 1

如果您有 2 个按钮，那么每个按钮必须具有不同的功能，

var count=1;

function nextStep(){
count=count++;
}

function previousStep(){
count=count--;
}

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

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