Angular: Progress of ng-repeat
http://angularjs.org/
by Venkata Sai Vamsi Penupothu
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="AppCtrl">
progress: <span ng-bind="progress"></span>
<div ng-repeat="i in list" ng-init="progress = (reportProgress($index))">
{{i}}
<hr/>
</div>
</div>
JavaScript
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function AppCtrl($scope){
$scope.list = []; /// list that is going to be repeated
$scope.count = 1000; /// no of items in the list
$scope.var;
/// filling the list
var templist = [];
for (var index = 0; index < $scope.count; index++) {
templist.push(index);
}
$scope.list = templist;
/// default msg of progress
$scope.progress = '0/' + $scope.count;
/// function will be called when the the list will be getting rendered
$scope.reportProgress = function (i) {
if((i+1)%100 !== 0){
return 1;
}
setTimeout(function () {
$scope.progress = (i+1) + "/" + $scope.count;
$scope.$apply();
});
return 1;
}
}