Angular JS:バックエンド呼び出し後にスコープ内のオブジェクト値を更新します

user2928913

HTMLテーブルを持つAngularjshtmlページがあります。これには約100行あります。ユーザーは10行または15行を選択し、バックエンド呼び出しを行います。バックエンド呼び出しは、$。ajax({...})を使用して行われ、処理を実行してデータベースを更新します。処理後、バックエンドは2つまたは3つのレコードを画面に戻します。これらの返されたオブジェクトには、新しいステータスといくつかの新しい値があります。したがって、これらのステータスをスコープ内の同じオブジェクトに同期して、画面に反映されるようにする必要があります。

各オブジェクトをループしてステータスを更新できることはわかっています。しかし、データのサイズが大きすぎるため(1000行になることもあります)、この作業を実行するためにAngularですぐに利用できる機能があるかどうかを知りたいと思います。Angularでそのような機能が利用できない場合は、私に役立つ他の無料のオープンソースツールを提案してください。

ここにコードスニペットを添付しています。機密保持の理由から、問題を顧客アカウントのシナリオに変換しました

<table >
     <thead >
       <tr>  
     <th >Customer Name</th>
     <th >Account Number</th>
     <th >Status </th>
     <th >Date</th>                 
       </tr>
    </thead>
    <tbody  ng-repeat="customer in customerList">
       <tr  ng-repeat="account in customer.accounts"  >
    <td>{{customer.name}}</td>
    <td>{{account.acctNum}}</td>
    <td>
         <input type="checkbox"  ng-model="account.acctId"  ng-change="selectThisAccount(account)" /> {{account.status}}
    </td>
    <td>{{account.activationTimestamp}}</td>
       </tr>
    </tbody>
</table>
<input  type="button" value="Activate Accounts"   ng-click="activateAccounts()"  />

Controller
===========

$scope.customerList = ....
// I have my customer list retrieved by way of another call and the data is assigned to the scope.customerList variable

$scope.selectedAccounts = [];
$scope.selectThisAccount = function(account) {
      $scope.selectedAccounts.push(account);
};


$scope.activateAccounts = function() {
    $scope.successfullyActivatedAccounts = [];
    $scope.successfullyActivatedAccounts = AccountService.activateAccounts($scope.selectedAccounts);
}

AccountService.js
======================
    this.activateAccounts = function(accounts)
    {

    var accountRequest ={};
    accountRequest.accountList = accounts;

     return $.ajax({
          type : 'POST',
          url: 'activateAccounts',
          data:JSON.stringify(accountRequest),
          dataType: "json",
          contentType: "application/json",
          success: function(accountresponse){
         return accountresponse.accountList;    
          },   
          error : function(xhr, ajaxOptions, thrownError) {
             hideReportMessage();
             alert( "Error: " + xhr.responseText + "\n" + thrownError );
          }
      });  
    },

これを説明するために、顧客は複数のアカウントを持つことができ、各アカウントは異なる状態にある可能性があります。エンドユーザーは、顧客アカウントのリストを表示し、それらのリストを選択して、アカウントのアクティブ化を試みます。アクティブ化されたアカウントオブジェクトのみがサーバーから返されます。リスト全体をループすることなく、適切なオブジェクトを識別するaccount.statusの値を更新する必要があります。

助けてください。

calebboyd

だからここにプランカーがあります。私はあなたの例を取りました。そして、いくつかの変更を加えました。私は$timeout複製に使用$httpます。このため、AngularPromiseを使用できます。.then)その中のコードが実行された後、ダイジェストサイクルが実行されます。また、参照($scope.selectedAccounts)が変更されたため、変更されたng-repeatものを更新します。$httpビューを更新することを約束して、その非常に使いやすいです。

プランクでsuccessfullyActivatedAccountsは、正常に返されたのはそれらだけであるため実際にアクティブ化されるのはそれらだけであることに気付くでしょう(ダミーデータ)。また、activateAccounts戻り値の順序が確実にわかっている場合は、ループインを最適化できます。しかし、全体として、これのパフォーマンスは問題ないはずです。

プランカーが処理できる限り大きくなるようにデータセットを更新しました。パフォーマンスのアクティブ化はまだかなり瞬時です。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular-バックエンドへの非同期呼び出しの後にプロシージャを呼び出す適切な方法

分類Dev

コンポーネントがHttpサービスメソッドを呼び出すかどうかのAngularユニットテスト:エラー:<spyOn>:スパイするオブジェクトが見つかりませんでした

分類Dev

Angularの特定のコンポーネントに対してのみバックエンドを呼び出す

分類Dev

jQueryを使用してAngularをロードすると、スクリプトのonloadコールバックの呼び出しに失敗します

分類Dev

json内の配列オブジェクトにアクセスして、Angular5でドロップダウン値を表示します

分類Dev

Angular JS:コントローラーから2番目のサービスを呼び出し、返されたオブジェクトでDOMを更新するにはどうすればよいですか?

分類Dev

Angular、URLからオブジェクトをエンコードおよびデコードします

分類Dev

Angular 11にアップグレードした後、「inject()をインジェクションコンテキストから呼び出す必要があります」を取得する

分類Dev

Angular HTTPで自動マッピングした後、オブジェクトのメソッドを呼び出す方法は?

分類Dev

Angular 6:バックエンドサーバーからFileオブジェクトを取得した後にファイルをダウンロードする

分類Dev

Angular 2Chart.jsおよびNG2-プロジェクトの更新後にデータオブジェクトをバインドしないグラフ

分類Dev

Angularアプリでバックエンド呼び出しを1回ディスパッチします

分類Dev

オブジェクト値をループするためにangular.foreachを使用して配列内の値をフェッチします

分類Dev

Angular Mat AutoCompleteは、バックエンドから返されたオブジェクトのドロップダウンリストを表示/表示しません

分類Dev

Angular HTTP呼び出しからJSONオブジェクトのプロパティをキャッチし、Angular CLIの「プロパティなし」エラーを修正するにはどうすればよいですか?

分類Dev

Angularを使用して、オブジェクトのプロパティ(値なし)を別のオブジェクトにコピーします

分類Dev

Angularフロントエンド、次に構文エラーのあるC#バックエンド:HTTPコントローラーが本文でJSONオブジェクトを受信しています

分類Dev

AngularはAPI呼び出しからのデータを[オブジェクトオブジェクト]として返しますが、コンポーネントでは未定義です

分類Dev

ajax呼び出しを介して更新するAngularサービスのデータオブジェクト変数

分類Dev

DOMオブジェクトで実行すると、angular.copyが不正な呼び出しエラーをスローします

分類Dev

Angular-複数のサブスクライバー/サブジェクトを持つHTTP呼び出しを呼び出す方法

分類Dev

Angular.js $ watch()がサービスのJSオブジェクトメンバーからの更新をキャッチしていません

分類Dev

Angular $ resourceを使用して、POSTリクエスト後にオブジェクトのリストを更新します

分類Dev

Angular2:プロパティ 'controls'がタイプ 'AbstractControl'に存在しません。インデックスを介してformarray内のオブジェクトの.controlにアクセスするときのエラー

分類Dev

2つのAPI呼び出しを必要とするAngular / rxjsにオブジェクトをロードするにはどうすればよいですか?

分類Dev

Angular-リソースの保存後にオブジェクトのすべてのプロパティを更新します

分類Dev

Angular $ scopeが期待どおりに機能していません。コントローラの$ scopeおよび$ scope.functionスコープでオブジェクト値を割り当てようとしています

分類Dev

Angular 2のReactiveFormsは、オプションのフィールドに空の値または空のオブジェクトを含むJSONを生成します

分類Dev

Angularによって動的に作成されたオブジェクトでjQuery関数を呼び出します

Related 関連記事

  1. 1

    Angular-バックエンドへの非同期呼び出しの後にプロシージャを呼び出す適切な方法

  2. 2

    コンポーネントがHttpサービスメソッドを呼び出すかどうかのAngularユニットテスト:エラー:<spyOn>:スパイするオブジェクトが見つかりませんでした

  3. 3

    Angularの特定のコンポーネントに対してのみバックエンドを呼び出す

  4. 4

    jQueryを使用してAngularをロードすると、スクリプトのonloadコールバックの呼び出しに失敗します

  5. 5

    json内の配列オブジェクトにアクセスして、Angular5でドロップダウン値を表示します

  6. 6

    Angular JS:コントローラーから2番目のサービスを呼び出し、返されたオブジェクトでDOMを更新するにはどうすればよいですか?

  7. 7

    Angular、URLからオブジェクトをエンコードおよびデコードします

  8. 8

    Angular 11にアップグレードした後、「inject()をインジェクションコンテキストから呼び出す必要があります」を取得する

  9. 9

    Angular HTTPで自動マッピングした後、オブジェクトのメソッドを呼び出す方法は?

  10. 10

    Angular 6:バックエンドサーバーからFileオブジェクトを取得した後にファイルをダウンロードする

  11. 11

    Angular 2Chart.jsおよびNG2-プロジェクトの更新後にデータオブジェクトをバインドしないグラフ

  12. 12

    Angularアプリでバックエンド呼び出しを1回ディスパッチします

  13. 13

    オブジェクト値をループするためにangular.foreachを使用して配列内の値をフェッチします

  14. 14

    Angular Mat AutoCompleteは、バックエンドから返されたオブジェクトのドロップダウンリストを表示/表示しません

  15. 15

    Angular HTTP呼び出しからJSONオブジェクトのプロパティをキャッチし、Angular CLIの「プロパティなし」エラーを修正するにはどうすればよいですか?

  16. 16

    Angularを使用して、オブジェクトのプロパティ(値なし)を別のオブジェクトにコピーします

  17. 17

    Angularフロントエンド、次に構文エラーのあるC#バックエンド:HTTPコントローラーが本文でJSONオブジェクトを受信しています

  18. 18

    AngularはAPI呼び出しからのデータを[オブジェクトオブジェクト]として返しますが、コンポーネントでは未定義です

  19. 19

    ajax呼び出しを介して更新するAngularサービスのデータオブジェクト変数

  20. 20

    DOMオブジェクトで実行すると、angular.copyが不正な呼び出しエラーをスローします

  21. 21

    Angular-複数のサブスクライバー/サブジェクトを持つHTTP呼び出しを呼び出す方法

  22. 22

    Angular.js $ watch()がサービスのJSオブジェクトメンバーからの更新をキャッチしていません

  23. 23

    Angular $ resourceを使用して、POSTリクエスト後にオブジェクトのリストを更新します

  24. 24

    Angular2:プロパティ 'controls'がタイプ 'AbstractControl'に存在しません。インデックスを介してformarray内のオブジェクトの.controlにアクセスするときのエラー

  25. 25

    2つのAPI呼び出しを必要とするAngular / rxjsにオブジェクトをロードするにはどうすればよいですか?

  26. 26

    Angular-リソースの保存後にオブジェクトのすべてのプロパティを更新します

  27. 27

    Angular $ scopeが期待どおりに機能していません。コントローラの$ scopeおよび$ scope.functionスコープでオブジェクト値を割り当てようとしています

  28. 28

    Angular 2のReactiveFormsは、オプションのフィールドに空の値または空のオブジェクトを含むJSONを生成します

  29. 29

    Angularによって動的に作成されたオブジェクトでjQuery関数を呼び出します

ホットタグ

アーカイブ