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の値を更新する必要があります。
助けてください。
だからここにプランカーがあります。私はあなたの例を取りました。そして、いくつかの変更を加えました。私は$timeout
複製に使用し$http
ます。このため、AngularPromiseを使用できます。(.then
)その中のコードが実行された後、ダイジェストサイクルが実行されます。また、参照($scope.selectedAccounts
)が変更されたため、変更されたng-repeat
ものを更新します。$http
ビューを更新することを約束して、その非常に使いやすいです。
プランクでsuccessfullyActivatedAccounts
は、正常に返されたのはそれらだけであるため、実際にアクティブ化されるのはそれらだけであることに気付くでしょう(ダミーデータ)。また、activateAccounts
戻り値の順序が確実にわかっている場合は、ループインを最適化できます。しかし、全体として、これのパフォーマンスは問題ないはずです。
プランカーが処理できる限り大きくなるようにデータセットを更新しました。パフォーマンスのアクティブ化はまだかなり瞬時です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加