在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你的元素，然后按一下按钮传递这个对象在你的控制器，并做必要的东西。