Jak przesłać wiele danych formularza z modelem ng na jednym przesłaniu

Question

Witam Chcę opublikować wszystkie dane formularza o tej samej nazwie modelu. to jest mój kod w tym również klonować tr tag, aby utworzyć więcej formularza o tej samej nazwie klas & 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> 

kątowy Kod Like That

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

Answer 1

Można osiągnąć to coś z array i ng-repeat zamiast klonowania elementu 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> 

kątowa 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); 
} 

Answer 2

EDIT: Ta struktura nie jest dobre. Myślę, że próbujesz utworzyć wiele wierszy i wybrać tabelę DOM i dane. To nie jest kanciasty sposób!

Jak zrobić z kątowego sposób

Trzeba zdefiniować tablicę w kontrolerze.

$scope.jobList = []; 

Musisz zdefiniować metodę wypychania. Twoja metoda składowania działa z tablicą jobList.

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

Należy zdefiniować powtarzający się przycisk td i jeden przycisk przesyłania.

<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 ODPOWIEDŹ za pojedynczy strzał.

Musisz zdefiniować każdy formularz za pomocą przycisku. I każda forma musi być unikalna. Możesz więc użyć unikatowego $index. Koniec należy dodać type = "submit" do przycisków kontroli form.

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

Nie można mieć jeden model dla wielu elementów wejściowych, ponieważ po zmianie wartości w jednym z pól wejściowych, nadpisze go z najnowszą wartością. Zakładając, że zaczniesz wypełniać formularz, od formularza 1 do formularza 3, a następnie przesłać, model będzie zawierał wartość wprowadzoną w ostatnio używanym polu wprowadzania, tj. Formularz3.

Aby rozwiązać problem, należy użyć kolekcji, tablicy lub obiektu (najlepiej tablicy) jako modelu.

Twój kontroler byłoby coś jak:

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

Twój HTML będzie somthing jak:

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

Aby przesłać formularz z samej nazwie będzie trzeba iteracyjne nad tablicy miejsc pracy i wywołania ajax dla każdego