My ng-repeat is taking long time to load so mean while my browser goes in hang state. So how to show user that loading is in progress or some kind of animation in angularjs?
2
-
Does it take too long to render (not typical, unless you have hundreds or even thousands of items), or does it take long to get the data from the backend?– New DevCommented Sep 18, 2015 at 6:44
-
@NewDev the no it doesn't takes long time for loading data from backend. The actual ng-repeat is taking time to show it in a format i want.– Abhay PoreCommented Sep 18, 2015 at 6:58
Add a comment
|
2 Answers
Use $timeout or $scope.$evalAsync to show loader mean while ng-repeat render elements or you can use directive also
HTML
<ul>
<li ng-repeat='item in items' check-render>{{item}}</li>
<ul>
<div id='loader'></div>
Angularjs
app.directive('checkRender', function($timeout) {
return {
restrict: 'A',
link: function(scope, el, attrs) {
if (scope.$last === true) {
$timeout(function() {
angular.element("#loader").fadeOut();
});
}
}
};
});
There is something which is called as ngProgress which is like a You-Tube style progress bar which loads on the top edge of the page. You can check it out here.
This also supports using the progress bar in a container. Maybe you may like this. I'm not sure how you will be able to use it but showing the progress on the div which has your ng-repeat elements will look nice I suppose.
