javascript - AngularJSの1つのSubmit Allボタンで複数のフォームを送信する

原文 javascript angularjs

次のようなAngularセットアップのフォームがあります。

ユーザーは変更を加えて一度に1つずつ送信でき、期待どおりに機能しますが、ユーザーが各アイテムの送信ボタンを押しているかのように、一度に1つずつ各アイテムを送信する「すべて送信」を追加したいと思います。これを行う最善の方法に少し困惑しています。現時点では、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>
答え
はい、コントローラーでオブジェクトを作成します($scope.formData={}など)。次に、ng-modelまたはdata-ng-modelを使用して要素にバインドし、ボタンをクリックしてこのオブジェクトをコントローラーに渡し、必要な処理を行います。
関連記事

javascript - jquery:未定義のphpからの配列

javascript - PHP、JSを使用して、フィルタリングされた結果に第2レベルのフィルタリングを追加する方法

javascript - ヘッダーのソートを無効にしようとするjquery tablesorterプラグインが機能しない

javascript - $ ionicPlatform.ready()とAngularJS Cordovaのコントローラー間のデータのバインド

javascript - React NativeのscaleXYアニメーションにはどのような構文が必要ですか?

javascript - MongoDB $ setEqualsを使用する場合のIDの引用符

javascript - txtドキュメントからプル情報を追加するバッチファイルを作成する方法

javascript - ファイルのURLまたはURLからフォルダーを開く方法

javascript - イオンクロスドメイン問題

javascript - jquery ajax呼び出し後にページを再読み込みする