如何在单次提交时使用ng-model提交多表单数据

Hi I want to post all form data with same model name. that is my code in this i also clone tr tag to create more form with same name classes & Model .

嗨,我想发布具有相同型号名称的所有表单数据。这是我的代码,我也克隆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>

angular Code Like That

像这样的角度代码

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

3 个解决方案

#1

You can achieve this thing with array and ng-repeat rather than cloning html element.

您可以使用数组和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>

Angular Controller

// 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);
}

#2

EDIT: This structure is not good. I think you are trying to create a lot of rows and select table DOM and datas. It is not an angular way!

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

How to do that with angular way

如何用角度方式做到这一点

You need to define an array in your controller.

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

$scope.jobList = [];

You need to define a push method. Your save method work with jobList array.

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

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

You need to define a repeating td and one submit button.

您需要定义重复的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 for single save.

单一保存的旧答案。

You need to define every form with a button. And every form have to be unique. So you can use $index for unique. End you need to add type="submit" to buttons for form control.

您需要使用按钮定义每个表单。每种形式都必须是独一无二的。所以你可以使用$ index表示唯一。结束,您需要将type =“submit”添加到窗体控件的按钮。

<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>

#3

You can't have a single model for multiple input elements, because if you change value in either of the input boxes, it will overwrite it with the latest value. Assuming you start filling the form, from form1 to form3, and do a submit, the model will hold value entered in the last used input box, i.e form3.

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

To solve your problem you need to use a collection, array or object (preferably array) as your model.

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

Your controller would be something like:

你的控制器将是这样的:

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();

Your HTML will be somthing like:

你的HTML将是这样的:

<button ng-click="jobModel.addRow()">
  Add Job
</button>
<div ng-repeat="job in jobModel.jobs">
  <input type="text" ng-model="job.quantity" placeholder="Quantity">
  <input type="text" ng-model="job.quality" placeholder="Quality">
</div>
<button ng-click="jobModel.save()">
  Save Jobs
</button>

To submit your form with same name you would need to iterate over the jobs array and make ajax calls for each

要提交具有相同名称的表单,您需要遍历jobs数组并为每个表单调用ajax

#1