Question

您好我想发布具有相同型号名称的所有表单数据。这是我的代码，我也克隆tr标签创建更多具有相同名称类和形式的表格。模特。

  <tr class="row_1">

                    <form name="myForm1" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>

                  <tr class="row_1">

                    <form name="myForm2" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>
                  <tr class="row_1">

                    <form name="myForm3" class="sub_job">
                        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
                        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
                        </form>

                 </tr>

                         </tbody>

                            </table>
                                                             <!--   </form> -->
            <button class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
            <button class="btn btn-warning" onclick="cloneRow()"  id="add_job">Add Row</button>

像这样的角度代码

 $scope.saveJob = function(data) {
    console.log(data);
    //http request goes here
}

Answer 1

编辑：这种结构并不好。我想你正在尝试创建很多行并选择表DOM和数据。 这不是一个有角度的方式！

如何使用角度方式

执行此操作

您需要在控制器中定义一个数组。

$scope.jobList = [];

您需要定义推送方法。您的保存方法适用于jobList数组。

$scope.addEmptyJob() = function(){
    var newJob = {};
    $scope.jobList.push(newJob);
}

您需要定义一个重复的td和一个提交按钮。

<form name="myForm_{{$index}}" class="sub_job">
    <tr class="row_1" ng-repeat="job in jobList">
        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
        <td>
            <button class="btn btn-warning" ng-click="addEmptyJob()"  id="add_job">Add New Row</button>
        </td>
    </tr>
    <button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
</form>

单次保存

OLD ANSWER 。

您需要使用按钮定义每个表单。每种形式都必须独特。因此，您可以使用$index作为唯一身份。结束你需要添加type =＆＃34;提交＆＃34;用于表单控件的按钮。

<tr class="row_1" ng-repeat="job in myArray track by $index">
    <form name="myForm_{{$index}}" class="sub_job">
        <td><input type="text" name="quantity" ng-model="job.quantity"/></td>
        <td><input type="text" name="quantity" ng-model="job.quality"/></td>
        <td>
            <button type="submit" class="btn btn-primary" ng-click="saveJob(job)" id="save_exit">Save & Exit</button>
            <button type="submit" class="btn btn-warning" onclick="cloneRow()"  id="add_job">Add Row</button>
        </td>
    </form>
</tr>

Answer 2

您可以使用array和ng-repeat来实现此功能，而不是克隆html元素。

<强> HTML

<table><tbody>
    <tr class="row_1" ng-repeat="job in jobs track by $index">
    <form name="myForm" class="sub_job">
        <td><input type="text" name="quantity[]" ng-model="job.quantity"/></td>
        <td><input type="text" name="quantity[]" ng-model="job.quality"/></td>
    </form>
    </tr>
</tbody></table>

<button class="btn btn-primary" ng-click="save()" id="save_exit">Save & Exit</button>
<button class="btn btn-warning" ng-click="clone()" id="add_job">Add Row</button>

角度控制器

// You can fetch this array of jobs from server for showing purpose
$scope.jobs = [
    {
       quantity: "1.0" ,
       quality: "A"
    },
    {
       quantity: "2.0" ,
       quality: "B"
    }
]

$scope.clone = function(){
    // You can change default values for new job to appear
    var empty = {
       quantity: "" ,
       quality: ""
    };
    $scope.jobs.push(empty);
}

$scope.save = function(){
    // You can send this array of jobs to server for saving purpose
    console.log($scope.jobs);
}

Answer 3

您不能为多个输入元素设置单个模型，因为如果更改任一输入框中的值，它将使用最新值覆盖它。假设您开始填写表单，从form1到form3，并进行提交，模型将保留在最后使用的输入框中输入的值，即form3。

要解决您的问题，您需要使用集合，数组或对象（最好是数组）作为模型。

您的控制器类似于：

war{
    rootSpec.filesMatching('**/WEB-INF/spring/*.xml'){ detail ->
            // change the name of detail file
        }

}

您的HTML将类似于：

var JobModel = function() {
  return {
    jobs: [],
    addRow: function() {
      var model = {
        quantity: "",
        quality: "",
      };
      this.jobs.push(model);
    },
    save: function() {
      console.log(this.jobs);
    },
    submit: function(){
      for(var i=0;i<this.jobs.length;i++){
        doSomeHTTPRequest(this.jobs[i]);
    }
  }
  };
};
$scope.jobModel = new JobModel();

要提交具有相同名称的表单，您需要迭代作业数组并为每个

进行ajax调用

如何在单一提交

3 个答案: