How to submit Multiple Form data with ng-model on single submit

Question

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

Answer 1

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!

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.

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

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

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

<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

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

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