如何使用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>

contractBillingReportList中的数据来自angular函数

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个项目，而应在网络服务上传递一些参数，以启用分页功能以及每次希望接收的金额，例如，如果您想一次显示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变量中……推荐的