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

前端之家收集整理的这篇文章主要介绍了html5 – Angular JS:在后端调用后更新范围内的对象值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个带有 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的值,而不是遍历整个列表.

请帮忙.

解决方法

所以这是一个 plunker.我已经举了你的榜样.并做了一些改变.我使用$timeout来复制$http,因此你可以使用角度承诺. (.then)执行该代码后,运行摘要循环.并且由于引用($scope.selectedAccounts)已更改ng-repeats刷新已更改的那些.它很容易使用$http与promises更新视图.

在插上,
您会注意到只有SuccessfulActivatedAccounts才会实际激活,因为它们是唯一成功返回的(虚拟数据).如果您确定了返回值的顺序,也可以优化activateAccounts中的循环.但总的来说,这应该是好的.

我将数据集更新为与plunker可以处理的一样大.激活性能仍然很快.

猜你在找的HTML5相关文章