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

Question

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

我知道我们可以遍历每个对象并更新状态。但由于数据量太大（有时甚至 1000 行），我想知道 Angular 中是否有任何现成的功能可以完成这项工作。如果 Angular 中没有这样的功能，请推荐任何其他可以为我提供帮助的免费开源工具。

我在这里附上代码 sn-p。只是出于保密的原因，我将我的问题转换为客户帐户场景

<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

我想使用ng-model 可以自然地解决您的问题。更具体地说，假设您在 Controller 中检索了 1000 行表中的所有数据，并且您已将数据集保存在 Controller 中为 $scope.dataset。然后，当您调用 ajax 更新某些行时，您可以简单地将 ajax 结果更新到您的$scope.dataset（数据）中，然后表（视图）将自行更新。

为了避免遍历$scope.dataset 中的所有 1000 行（当您有 ajax 结果时），为了匹配更新的条目，您还可以简单地添加一个 index服务器端的每个条目的字段（或对所有条目进行排序）。然后您可以使用 index 访问$scope.dataset 中的任何条目。

Answer 2

所以这里是plunker。我举了你的例子。并做了一些改动。我使用$timeout 复制$http，因此您可以使用角度承诺。 （.then）在执行完代码后会运行摘要循环。由于引用 ($scope.selectedAccounts) 已更改，ng-repeats 刷新已更改的引用。它非常易于使用 $http 并承诺更新视图。

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

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