使用AngularJS加载大型数据集

时间:2013-07-05 21:26:51

标签: angularjs

我正在尝试设计一种方法来将大量数据(超过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. 我正在向数据库发出多个请求,并且每个请求都会正确返回,但是在所有请求都完成之前页面才会呈现 - 这完全否定了首先执行多个请求的要点。

  3. 所以查看我的代码,如何重新编写它来解决这两个问题?那么数据作为一个数组返回,并且每次查询完成时都会呈现数据?

    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进行过滤也会出现明显的延迟,直到结果缩小为止。另一方面,几百行工作得相当好,并允许本机过滤 - 这是我实现的关键目标。

1 个答案:

答案 0 :(得分:7)

如果你想单独对待每一个(单独展示每一个),你就不能真正$ q.all承诺(这使它们成为一个成功或失败的重大承诺)。

一旦你得到它们,我会把你得到的东西推回到范围内。以下是一个例子:

    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/

此处存在一个问题,即项目的顺序取决于退货的时间,而不是原始请求订单。我会让你自己想出那个。