如何使用 AngularJS 在 HTML 中滚动加载数据?

Question

我有一个HTML动态表

<div class="clearfix reportWrapper" >
<div class="reportTable">
<table class="table table-bordered footerBGColor">
<thead fix-head class="headerTable">
<tr>
<th ng-repeat="(header, value) in vm.contractBillingReportList[0]" >{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.contractBillingReportList track by $index">
<td ng-repeat="(key, value) in item" ng-class="vm.getWidthValue(key, value, item)">
{{value}}
</td>
</tr>
</tbody>
</table>
</div>
</div>

合约账单报表列表中的数据来自角度函数

vm.OpenBManageContractBillingReport = function () {
vm.showTable = true;
vm.Search.BillingReportType= "DetailReport",
reportService.GetContractBillingList(vm.Search).then(function (response) {
console.log(response);
vm.contractBillingReportList = response;
}, function (err) {
});
};

现在的问题是根据搜索条件加载数据，有时数据数量巨大 5000-10000。在这种情况下，所有数据都加载在 Angular 函数contractBillingReportList上，但绑定到 html 表(在数据量很大的情况下)需要花费大量时间，并且整个页面都会挂起。如何应用按需加载，以便首先仅显示 1000 个数据，并在滚动时加载更多数据(例如：- 如 Facebook 上的新闻提要)。

Answer 1

你应该做的是在表的主体中添加一个事件侦听器on-scroll，有不同的方法可以做到这一点，并检查你是否在底部，取决于你是否要使用jquery，以及你的视图布局 jQuery示例，其他示例

绑定到此事件后，需要更新服务，不应每次请求 10000 个项目，应在 Web 服务上传递一些参数，该参数启用分页以及每次要接收的数量，例如，如果要一次显示 100 个项目，则必须请求查询的第一页 100 个项目， 在滚动时，您再次执行请求，但将页面名称增加 1，然后获得接下来的 100 个项目，依此类推，但请记住对模板上的各个项目使用一次性绑定，否则最终会遇到性能问题：

vm.OpenBManageContractBillingReport = function () {
vm.currentPage = !vm.currentPage ? 0 : vm.currentPage + 1;
reportService.GetContractBillingList({
searchText: vm.Search,
page: vm.currentPage,
resultLimit: 100,
})
.then(function (response) {
console.log(response);
vm.contractBillingReportList = response;
}, function (err) {
});
};

再说一次，如果你的 Web 服务 API 不支持分页，你必须做一些非常讨厌的解决方案，比如获取所有结果并在内存中过滤这些结果，然后将该块推送到vm.contractBillingReportList变量中......不推荐