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

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

您可以使用array而ng-repeat不是克隆 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);
}