加载与AngularJS大型数据集 [英] Loading large datasets with AngularJS

问题描述

我试图设计一种方式来加载大量数据（以上1000行）到一个页面，没有分页。在这第一个障碍是查询数据库并行一口大小的块，而我在<带解决方案的帮助下完成href=\"http://stackoverflow.com/questions/16854963/how-to-make-sequentially-rest-webservices-calls-with-angularjs\">How使连续休息web服务与AngularJS？

I'm trying to devise a way to load large amounts of data (upwards of 1000 rows) into a page, without pagination. The first hurdle in this was to query the DB in parallel bite sized chunks, which I've done with the help of the solution at How to make sequentially Rest webservices calls with AngularJS?

我遇到两个问题，我所实现的不过：

I'm running into two problems with what I've implemented however:

1. 每个返回的对象被传递到，然后返回自己作为角使用绑定的数组的数组。即[[{键：值，键：值，键：值}，{键：值，键：值，键：值}]，[{键：值，键：值，键：值}，{关键：值，键：值，键：值}]因此我不能使用NG-重复=数据项，因为数据是一个数组的数组。做中的数据项，[0]确实让项目可用。级联似乎是答案，但我一直无法理清的方式，使得它的工作。

1. Each returned object is being passed into an array which is then itself returned as the array that Angular uses to bind. i.e. [[{key:value, key:value, key:value}, {key:value, key:value, key:value}], [{key:value, key:value, key:value}, {key:value, key:value, key:value}]] As such I can't use ng-repeat="item in data" because data is an array of arrays. Doing "item in data[0]" does make item available. Concatenation seems to be the answer but I haven't been able to sort out a way that makes it work.

我正在多个数据库请求，并且每个请求被正确地返回，但页面不呈现直到所有请求已完成 - 这完全否定这样摆在首位多个请求的地步。

I'm making multiple requests to the database and each request gets returned correctly but the page doesn't render until all the requests have completed -- which completely negates the point of doing multiple requests in the first place.

所以，看在我的code，我怎么能重新写它来解决这两个问题？使数据返回为一个阵列，并且该数据被呈现每一个查询完成时间

So looking over my code, how can I re-write it to solve these two issues? So that data is returned as one array and that data is rendered every time a query is completed?

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过滤也经历了显著的延迟，直到结果被收窄。在另一方面，几百行工作体面良好，允许本地过滤 - 这是对我实施的关键目标

I should add that I did manage to get this working based on the solution below and an angular.forEach(). Can't suggest anyone working with "big data" go this route. At around 1000 rows, the browser was overwhelmed and began slowing down considerably. Trying to filter with angular.filter also experienced a significant delay until the results were narrowed down. On the other hand, a few hundred rows worked respectably well and allowed native filtering - which was a key goal for my implementation.

推荐答案

您真的不能$ q.all的承诺一起（这使它们成为一个大的承诺，成功或失败在一起），如果你想对待每一个单独（显示每一个单独）。

You can't really $q.all the promises together (which makes them into one big promise that succeeds or fails together) if you want to treat each one individually (display each one individually).

我想只要你让他们把你重新进入范围的事。下面是一个例子：

I would push the things you get back into the scope as soon as you get them. Below is an example:

    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/

Here's a fiddle showing it in action: http://jsfiddle.net/wWcvx/1/

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

There's an issue here where the order of the items are based on when they were returned, not on your original request order. I'll let you figure that one out yourself.

这篇关于加载与AngularJS大型数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！