我有一个带有
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可以处理的一样大.激活性能仍然很快.