使用AngularJS加载大型数据集

我试图设计一种方法来将大量数据（超过1000行）加载到页面中，而无需分页。在这样做的第一个障碍是查询并行一口大小的块，我已经在How to make sequentially Rest webservices calls with AngularJS?使用AngularJS加载大型数据集

与解决方案的帮助下完成的，我遇到了两个问题，什么我不过实现的DB：

每个返回的对象都被传递到一个数组中，然后它自己作为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”，因为数据是数组的数组。做“数据[0]中的项目”确实使项目可用。连接似乎是答案，但我一直没有能够找出一种使其工作的方式。
我正在向数据库发出多个请求，并且每个请求都得到正确返回，但在所有请求都完成之前，页面不会呈现 - 这完全否定了首先执行多个请求的要点。

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

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过滤也经历了显着的延迟，直到结果缩小。另一方面，几百行很好地工作，并允许本地过滤 - 这是我实现的关键目标。

来源

2013-07-05 iamsar

谁拥有一个理智的头脑想凝视千行的数据？ – Bart

@Bart很遗憾，我必须这样做。一些商业分析师很喜欢使用1000行Excel数据，并希望在网络上看到类似的视图。虽然我完全不同意他们，有时你必须做客户想要的东西:( – Terry

@Bart谁想要点击100页的10行每个？我想这实际上是我寻找替代解决方案的分页范例和无限滚动并不能解决我遇到的问题，总体目标是加载你的数据，然后在Angular中对它进行过滤，所以你不一定会看1000行 - 但如果你疯了，你可以。 – iamsar

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

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

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/

这里有一个问题，即项目的顺序是根据被退回时，他们就不是你原来的要求顺序。我会让你自己想出一个。

来源

2013-07-05 23:45:52

感谢您的回复。在我回到办公室来测试这个过程之前几个星期，但我期待着使用它。无论如何，订单本身并不重要。 – iamsar

终于到了这个地步。工作很好。比我最初试图做的更容易。这个'angular.forEach'功能是关键。 – iamsar

使用AngularJS加载大型数据集

回答

相关问题