在AngularJS中用一個Submit All按鈕提交多個表單

Question

我在Angular setup中有一個表單，如下所示。

用戶可以進行更改並一次提交一個，它按預期方式工作，但我想添加一個「提交全部」，每次提交一個項目，就好像用戶正在按提交按鈕每。我有點難倒了最好的方式來做到這一點。截至目前，由於API約束，我無法將它們作爲批次提交。我也想讓jQuery避開這個等式。

我的第一個想法是創建一個新的對象，其中包含每個項目的信息，然後循環並提交。我不確定如何在控制器中進行設置。

<div class="table-responsive"> 
    <table class="table table-striped"> 
     <thead> 
     <th>Name</th> 
     <th></th> 
     <th>Age</th> 
     <th>Kids</th> 
     <th></th> 
     </thead> 
     <tbody> 
     <tr class="pending-item animate-repeat" 
      data-ng-repeat="user in Users" 
      data-ng-form="userForm" 
      role="form" 
      data-ng-submit="submitUser(user, userDetails)" 
      novalidate> 
      <td class="img-container"> 
      <img data-ng-src="{{user['image']['url']}}" 
       alt="{{user['image']['alt'] || ' '}}" 
       class="img-responsive" > 
      </td> 
      <td class="col-xs-6"> 
      <div class="user-info"> 
       <p class="user-name"> 
       {{user['name']}} 
       </p> 
      </div> 
      </td> 
      <td> 
      <div class="input-group input-group-sm"> 
       <span class="input-group-addon">Age</span> 
       <input type="number" min="0" 
        name="age" 
        class="form-control age" 
        data-ng-init="userDetails.age = user['age']" 
        data-ng-model="userDetails.age" 
        required> 
      </div> 
      </td> 
      <td> 
      <div class="input-group input-group-sm"> 
       <input type="number" min="0" step="1" 
        name="kids" 
        class="form-control kids" 
        data-ng-disabled="user['kids'] === true" 
        data-ng-pattern="/^\d+$/" 
        data-ng-init="userDetails.kidsCount = user['kids']['quantity']" 
        data-ng-model="userDetails.kidsCount" 
        required> 
       <div class="input-group-addon"># of kids</div> 
      </div> 
      </td> 
      <td> 
      <div class="btn-group btn-col"> 
       <button type="submit" 
         class="btn btn-success btn-sm" 
         data-ng-disabled="userForm.$invalid || userDetails.working" 
         data-ng-click="submitUser(user, userDetails)"> 
        Submit 
       </span> 
       </button> 
      </div> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    <button ng-click="submitAllUsers()">Submit All Users</button> 
    </div> 

Answer 1

是，創建你的控制器中的對象，說$scope.formData={}，然後將它綁定使用ng-model或data-ng-model你的元素，然後按一下按鈕傳遞這個對象在你的控制器，並做必要的東西。