Question

如何将val1设置为$ _POST变量？因为在步骤2中val1为空。

我尝试使用$ scope，$ rootScope，angular.copy（）和.val（）。

这是我的HTML代码：

<html ng-app="myApp"><body>
  <form action="url.php" method="POST" ng-controller="FormController as vmForm">
  <div ng-switch="vmForm.step">
  <div class="stepone" ng-switch-when="one">

    <label for="val1">Val1</label>
    <input type="text" name="val1" ng-model="val1">

  <button type="button" ng-click="vmForm.stepTwo()"></button>
  </div>

  <div class="steptwo" ng-switch-when="two">
  <label for="val2">Val2</label>
  <input type="text" name="val2" ng-model="val2">

  <input type="submit" value="Submit">
  </body>

JS

<script>
 angular.module('myApp', ['ngAnimate'])
 .controller('FormController', FormController);

  function FormController($scope) {
  var vm = this;
  vm.step = "one";
  vm.stepTwo = stepTwo;

  function stepTwo() {
    vm.step = "two";
}
}</script>

Answer 1

$ _ POST是一个可在服务器上访问的PHP变量。它包含作为关联数组在HTTP POST请求中发送的有效负载或请求主体。它不能使用Javascript / AngularJS直接设置。

您可以做的是构建您的请求数据并向表单操作终结点发出$ http POST请求。以下是基于您发布的代码的工作示例：http://plnkr.co/edit/C1FGvoDrmzYEFMCwymIG?p=preview

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="myApp">
    <h1>Hello Plunker!</h1>
    <form ng-submit="formSubmit()" ng-controller="FormController">
      <p>Val1: {{val1}}</p>
      <p>Val2: {{val2}}</p>
      <div ng-switch="vm.step">
        <div class="stepone" ng-switch-when="one">
          <label for="val1">Val1</label>
          <input type="text" name="val1" ng-model="$parent.val1">
          <button type="button" ng-click="stepTwo()">Go to Step two</button>
        </div>

        <div class="steptwo" ng-switch-when="two">
          <label for="val2">Val2</label>
          <input type="text" name="val2" ng-model="$parent.val2">
          <input type="submit" value="Submit">
        </div>
      </div>
    </form>
  </body>
</html>

的script.js

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

app.controller('FormController', ['$scope','$http',function ($scope,$http) {
    $scope.vm = {
      step : "one"
    };
    $scope.val1 = "";
    $scope.val2 = "";

    $scope.stepTwo = function () {
      $scope.vm.step = "two";
    }

    $scope.formSubmit = function () {
      console.log($scope.val1, $scope.val2);
      var req = {
        url : 'url.php',
        method: 'POST',
        data : {
          val1 : $scope.val1,
          val2 : $scope.val2
        }
      };

      $http(req).then(function(response) {
        console.log('success', response);
      }, function(errorResponse){
        console.log('error', errorResponse);
      });
    }
}]);

Answer 2

只需将所有内容保留在控制器中，然后像这样调整HTML：

<form action="url.php" method="POST" ng-controller="FormController as vmForm">
  <div ng-switch="vmForm.step">
    <div class="stepone" ng-switch-when="one">
      <label for="val1">Val1</label>
      <input type="text" name="val1" ng-model="vmForm.val1">
      <button type="button" ng-click="vmForm.stepTwo()">Goto Step 2</button>
    </div>
    <div class="steptwo" ng-switch-when="two">
      <input type="hidden" name="val1" value="{{vmForm.val1}}">
      <label for="val2">Val2</label>
      <input type="text" name="val2" ng-model="val2">
      <input type="submit" value="Submit">
    </div>
  </div>
</form>

对代码的调整只是将“val1”的范围提高到“vmForm.val1”，因此在步骤2中，可以将“vmForm.val1”分配给隐藏的输入字段进行发布。

以下是在浏览器调试器中发布的表单字段：

这是一个Plunker，http://plnkr.co/edit/3VaFMjZuH09A4dIr1afg?p=preview

打开浏览器调试器并查看网络流量，以查看正在发布的表单字段。

角度 - 多步形式

2 个答案: