花費大量的時間來渲染大型json數據

Question

 $http.get('resturl').success(function (data) { //makes a rest call here 
      $scope.myData = data; 
    }); 

只有在請求完成後纔會在網格中加載數據。我有非常大的數據，所以這使得用戶等待2分鐘-3分鐘來加載網格。有沒有辦法快速渲染大量數據？

Answer 1

在服務器端爲大數據集使用分頁數據，並使用分頁網格將其顯示給用戶。

在這個問題上，你有分頁nggrid的example

Answer 2

單向綁定使事情更快使用::看到 Simple One way binding for ng-repeat?，可以減少你的數據嗎？還看看分頁？

是您的服務器速度慢，我發現，一旦綁定完成在定時器做這樣的事情

$http.get('resturl').success(function (data) { //makes a rest call here 
      console.log("Request Complete"); 
      $scope.myData = data; 
      $timeout(function() { console.log("Binding complete"); }); 
    }); 

日誌將得到執行。

瞭解您的網格的內容也將有所幫助。

Answer 3

$scope.pagingOptions = { 

pageSizes: [5, 7,10, 20], 

pageSize: 7, 

currentPage: 1 

}; 



$scope.setPagingData = function(data, page, pageSize) 
{ 

var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 

$scope.myData = pagedData; 

$scope.totalServerItems = data.length; 

if (!$scope.$$phase) { 

$scope.$apply(); 

} 

}; 

$scope.getPagedDataAsync = function(pageSize, page, searchText) { 

setTimeout(function() { 

var data; 

if (searchText) { 

var ft = searchText.toLowerCase(); 

$http.get('largeLoad.json').success(function(largeLoad) { 

data = largeLoad.filter(function(item) { 

return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; 

}); 

$scope.setPagingData(data, page, pageSize); 

}); 

} 
else { 

$http.get('largeLoad.json').success(function(largeLoad) { 

$scope.setPagingData(largeLoad, page, pageSize); 

var myData = $.parseJSON(JSON.parse(largeLoad)); 

$scope.myData = myData; 

}); 


} 

}, 100); 

}; 


$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 


$scope.$watch('pagingOptions', function(newVal, oldVal) { 

if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { 

$scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 

} 

}, true); 

可能是這段代碼可以幫助您提供快速加載JSON數據的分頁。