使用AngularJS

Question

我在Angular设置中有一个表单，如下所示。

用户可以进行更改并一次提交一个并按预期工作但我想添加一个“全部提交”，每次提交一个项目，就好像用户按下每个项目的提交按钮一样。我有点难以做到最好的方法。截至目前，由于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将其与您的元素绑定，然后点击按钮，在控制器中传递此对象，做必要的事情。