使用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加載大型數據集

回答

相關問題