0

I have an chtml page using Angular Js that contains list with objects from database but it takes a long time to load the data. how can I load just 10 objects and display them, and than continue to load the data and show the rest of data in Angular Js????

BrMe
  • 315
  • 2
  • 8
  • 22
  • are you asking about pagination or breakup while loading ?? – streak Dec 06 '12 at 08:18
  • if you want pagination you can refer this link :- [http://stackoverflow.com/questions/11581209/angularjs-pagination-on-a-list-using-ng-repeater][1] [1]: http://stackoverflow.com/questions/11581209/angularjs-pagination-on-a-list-using-ng-repeater – streak Dec 06 '12 at 08:20
  • I dont want pagination.I want to see the data display slowly,now it loads some seconnds and than display all the data.I want to see part of data immediatly – BrMe Dec 06 '12 at 08:27
  • You would have to separate the call to multiple synchronous calls, like call to fetch the first 20, then next 20 and so on... – matys84pl Dec 06 '12 at 19:23

1 Answers1

1

It sounds like you have a lot of data that you want to slowly load to the front end so you don't have to wait. The only method I can think of for adding data periodically would be a setInterval.

the key would be to create a new variable

$scope.displayObjects = []

That you could contiously append to like so

for(var x = currentIndex; x < currentIndex + step && x < $scope.objects.length; x++){
    $scope.displayObjects.push($scope.objects[x]);                        
}

Then just set up an interval to continuously call that. You will also need to make use of 

$scope.$apply()

to tell angular to re-apply itself (http://docs.angularjs.org/api/ng.$rootScope.Scope#$apply).

http://jsfiddle.net/A9uND/20/ You can adjust how much it loads with each step via the step variable.

Next time include a jsfiddle (or something similar) so it's easier to assist you.

While the method outlined above will work, I would suggest tracking how much you can see and then only loading the relevant ones. As you scroll add more along the way.

Mathew Berg
  • 28,625
  • 11
  • 69
  • 90
  • Thank you!!I think it will work for me.But i get the data from json file.I use : "$http.get('List.json').success(function (data) )".How can i get just 10 objects from file??? – BrMe Dec 09 '12 at 07:39
  • You wouldn't just get 10 objects, you could get everything. Then iterate over it using a setInterval. So in your case i would store data in $scope.objects then fire a function to set up the interval and continue onwards. – Mathew Berg Dec 17 '12 at 15:41