Is there a way to hide a preloader div only after all data has finished loading in an ng-repeat loop?
Check out this interactive example on Plunker: http://plnkr.co/edit/ilgOZzIy2axSi5Iy85C7?p=preview
Here is the HTML code:
<div ng-controller="locationAccordionCtrl">
<div ng-repeat="location in locations" on-finish-render="ngRepeatFinished">
{{location.siteName}}
<ul>
<li ng-repeat="listOfLocations in location.locationsList track by $index">
{{listOfLocations}}
</li>
</ul>
</div>
</div>
This is the Controller code:
App.controller('locationAccordionCtrl', function ($scope) {
$scope.locations = [
{
"siteName":"First Location",
"locationsList":['First Location 1', 'First Location 2', 'First Location 3']
},
{
"siteName":"Second Location",
"locationsList":['Second Location 1', 'Second Location 2', 'Second Location 3']
},
{
"siteName":"Third Location",
"locationsList":['Third Location 1', 'Third Location 2', 'Third Location 3']
}
];
// Custom directive to hide preloader after repeater finishes loading data
App.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngRepeatFinished');
});
}
}
}
});
// Hide the preloader
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
$scope.hidePreLoader = true;
});
});