AngularJS: Detect Completion of Nested NgRepeats

I am working with a large table in AngularJS which builds itself from a json object using nested ng-repeats. I needed to know when this was all completed so I could format the table at the end of the process.

I decided on creating a service to track the running of the ng-repeats, and a directive which sits on the same element as the ng-repeat continually resets an $interval until the ng-repeats are completed. Why is this better than some of the many posts online which show how to run a callback on the completion of an individual ng-repeat? Because it allows you to watch a group of nested ng-repeats and only fires once all are complete, not each time each ng-repeat finishes.

Start it up right after adding your data to the ng-repeat element (in my case, after a service retrieves the data from an $http request):

And finally, just listen for completion and then do what you need to do:

 

Leave a Reply

Your email address will not be published. Required fields are marked *