使用 AngularJS 加载大型数据集

Question

我正在尝试设计一种方法来将大量数据（超过 1000 行）加载到页面中，而无需分页。这方面的第一个障碍是以并行的小块查询数据库，我在How to make sequentially Rest webservices calls with AngularJS?的解决方案的帮助下完成了这项工作@

我在实现的过程中遇到了两个问题：

1. 每个返回的对象都被传递到一个数组中，然后该数组本身作为 Angular 用来绑定的数组返回。即 [[{key:value, key:value, key:value}, {key:value, key:value, key:value}], [{key:value, key:value, key:value}, {key: value, key:value, key:value}]] 因此我不能使用 ng-repeat="item in data" 因为 data 是一个数组数组。执行“数据 [0] 中的项目”确实使项目可用。串联似乎是答案，但我一直无法找出一种使它起作用的方法。

2. 我正在向数据库发出多个请求，并且每个请求都正确返回，但在所有请求完成之前页面不会呈现——这完全否定了首先执行多个请求的意义。

那么查看我的代码，我该如何重新编写它来解决这两个问题？这样数据作为一个数组返回，并且每次查询完成时都会渲染该数据？

app.factory('ScanService', function($http, $q) {
  function fetchOne(stepCount) {
    return $http({
      method: 'GET',
      url: '/index.php/scans',
      params: {step:stepCount}
    })
    .then(function onSuccess(response) {
      return response.data;
    }
    return {
      fetchAll: function(steps) {
        var scans = [];
        for (var i = 1; i <= steps; i++) {
          scans.push(fetchOne(i));
        }
        return $q.all(scans);
      }
    };
});

app.controller.ScanCtrl = function($scope, $q, ScanService) {
  $scope.scans = ScanService.fetchAll(10);
};

---

跟进

我应该补充一点，我确实设法根据下面的解决方案和 angular.forEach() 来完成这项工作。不能建议任何使用“大数据”的人走这条路。在大约 1000 行时，浏览器不堪重负并开始显着减速。尝试使用 angular.filter 进行过滤也经历了明显的延迟，直到结果被缩小。另一方面，几百行运行良好，并允许本地过滤——这是我实现的一个关键目标。

Answer 1

如果你想单独对待每个承诺（单独显示每个承诺），你不能真正将所有承诺放在一起（这使它们成为一个成功或失败的大承诺）。

一旦你得到它们，我会把你得到的东西推回范围。下面是一个例子：

    function MyCtrl($scope, $timeout, $q) {
        var fetchOne = function() {
            var deferred = $q.defer();
            $timeout(function() {
                deferred.resolve([random(), random() + 100, random() + 200]);
            }, random() * 5000);
            return deferred.promise;
        };

        $scope.scans = [];
        for (var i = 0; i < 2; i++) {
            fetchOne().then(function(items) {
                angular.forEach(items, function(item) {
                    $scope.scans.push(item);
                });
            });
        };
    }

这是一个展示它的小提琴：http://jsfiddle.net/wWcvx/1/

这里存在一个问题，即商品的顺序基于退货时间，而不是您的原始请求订单。我会让你自己解决这个问题。