如何多次显示同一个表单？答案

【问题标题】：How to display the same form multiple times?如何多次显示同一个表单？
【发布时间】：2020-06-21 07:02:34
【问题描述】：

我正在尝试制作一个在单击“单击以输入观察”按钮后显示的表单。单击“下一个观察”按钮时应出现相同的表单。这应该循环发生，直到我单击“完成”按钮。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<form>
Vendor Name: <input type="text"> <br> <br>
Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>

<div ng-show="showMe">
    <br> <br> <form>
    Detailed Observation <input type="text">
    <button type="submit" ng-click="myFunc()"> Next Observation </button>
    <button type="submit"> Finish </button>
    </form>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = true;
    }
});
</script>
</body>
</html>

【问题讨论】：

标签： angularjs

【解决方案1】：

如果我对您的理解正确，您无需更改 UI（例如再次渲染 form 或其他内容），而是在每次“下一步”点击后重置表单。

如果是这样，我的建议是进行一系列观察。单击“下一步”会将输入的值推送到此数组中并清除输入。单击完成将对数组执行某些操作（当前记录）。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<form>
Vendor Name: <input type="text"> <br> <br>
Vendor Details: <textarea> </textarea> <br> <br>
<button ng-click="myFunc()">Click to enter Observations</button>
</form>

<div ng-show="showMe">
    <br> <br> <form>
    Detailed Observation <input type="text" ng-model="observation">
    <button type="submit" ng-click="nextObservation()"> Next Observation </button>
    <button type="submit" ng-click="finish()"> Finish </button>
    </form>
</div>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.observations = [];
    $scope.showMe = false;
    $scope.myFunc = function() {
        $scope.showMe = true;
    }
    $scope.nextObservation = function() {
      if ($scope.observation) {
          $scope.observations.push($scope.observation);
          $scope.observation = '';
      }
    }
    
    $scope.finish = function() {
        $scope.nextObservation();
        console.log($scope.observations);
    }
});
</script>
</body>
</html>

更新

为了保留以前的值但在单击“下一步”时添加一个新值，您可以将该数组与ng-repeat 一起使用，以基于该数组呈现用户界面。请注意，这次您需要track by $index 以避免实体重复（更多信息：https://stackoverflow.com/a/26518721/863110）

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <form>
      Vendor Name: <input type="text"> <br> <br> Vendor Details: <textarea> </textarea> <br> <br>
      <button ng-click="myFunc()">Click to enter Observations</button>
    </form>

    <div ng-repeat="observation in observations track by $index">
      <br> <br>
      <form>
        Detailed Observation <input type="text" ng-model="observations[$index]">
        <button type="submit" ng-click="nextObservation($index)" ng-if="$last"> Next Observation </button>
        <button type="submit" ng-click="finish()" ng-if="$last"> Finish </button>
      </form>
    </div>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.observations = [];

      $scope.myFunc = function() {
        $scope.observations.push('');
      }
      $scope.nextObservation = function($index) {
        $scope.observations[$index]
        if ($scope.observations[$index]) {
          $scope.observations.push('');
        }
      }
      $scope.finish = function() {
        console.log($scope.observations);
      }
    });
  </script>
</body>
</html>

【讨论】：

感谢您的帮助。它解决了我的目的。但是，我还需要更改 UI，如最初的问题中所述。
I need to change the UI as well - 怎么样？应该在 UI 中进行哪些更改？
我希望“详细观察”表单一次又一次地出现，直到我没有点击完成按钮。
你的意思是最终会有多个表格吗？意思是，当点击下一个表单时，会添加而不是替换当前表单？
是的，这正是我们所需要的。