Angularjs 渲染大型json数据需要大量时间

Angularjs 渲染大型json数据需要大量时间,angularjs,ng-grid,Angularjs,Ng Grid,只有在请求完成后,数据才会加载到网格中。我有非常大的数据,所以用户需要等待2分钟-3分钟才能加载网格。有没有快速呈现大数据的方法?在服务器端为大数据集使用分页数据,并使用分页网格将其显示给用户 在这个问题中,您有一个分页nggrid的例子,单向绑定使事情更快使用::参见 ,你能减少你的数据吗?还要看分页吗 你的服务器速度慢吗,我发现 $http.get('resturl').success(function (data) { //makes a rest call here

只有在请求完成后,数据才会加载到网格中。我有非常大的数据,所以用户需要等待2分钟-3分钟才能加载网格。有没有快速呈现大数据的方法?

在服务器端为大数据集使用分页数据,并使用分页网格将其显示给用户


在这个问题中,您有一个分页nggrid的例子,单向绑定使事情更快使用::参见 ,你能减少你的数据吗?还要看分页吗

你的服务器速度慢吗,我发现

     $http.get('resturl').success(function (data) { //makes a rest call here
          $scope.myData = data;
     }); 
绑定完成后,将执行计时器中的日志

了解网格中的内容也会有所帮助

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

这段代码可能会帮助您在快速加载JSON数据的情况下提供分页功能。

看起来您在服务器端遇到了问题使用分页:服务器端分页示例您的问题似乎出在网格上,或者您的服务器响应太慢-无论如何,你提供的信息很难让人知道。使用分页没有帮助。当我更改页面时,它会再次发出请求,并再次花费时间获取数据。此分页请求将仅获取所需的数据,以显示在网格的单个页面中。内容是文本…分页也没有帮助。
$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);