Angular JS:在后端调用后更新范围内的对象值

Question

我有一个带有HTML表的角度js html页面.这有大约100行.用户选择10或15行并进行后端呼叫.后端调用使用$ .ajax({...})进行处理和更新数据库.处理完成后,后端会将2或3条记录返回到屏幕.这些返回的对象将具有新状态和一些新值.所以我需要将这些状态同步回我的范围内的同一个对象,以便它们反映在屏幕上.

我知道我们可以遍历每个对象并更新状态.但是由于数据的大小太高(有时甚至是1000行),我想知道角度是否有任何现成的功能来完成这项工作.如果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的值,而不是遍历整个列表.

请帮忙.

Answer 1

所以这是一个笨蛋。我已经举了你的例子。并做了一些改变。我用来$timeout复制$http，因此你可以使用角度承诺。（.then）中的代码执行后，将运行摘要循环。由于引用 ( $scope.selectedAccounts) 已更改，因此ng-repeat请刷新那些已更改的引用。它非常易于使用$http，并承诺更新视图。

在 plunk 中，您会注意到只有successfullyActivatedAccounts实际激活，因为它们是唯一成功返回的（虚拟数据）。activateAccounts如果您确定返回值的顺序，则可以优化循环。但总体来说这个性能应该还不错。

我将数据集更新为 plunker 可以处理的大小。激活性能仍然非常即时。