repeatComplete
is an Angular module with a directive to execute code when an ng-repeat
has finished adding elements to the DOM. The directive can fire a generic or custom-named event upon repeat completion and/or execute a callback function.
If neither event nor callback attributes are defined, a repeat-complete
event will be emitted.
Include the repeatComplete.js
file and inject the repeatComplete
dependency in your app module to use:
Module:
angular.module('myApp', ['repeatComplete']);
View:
<ul>
<li ng-repeat="item in items" repeat-complete>
{{item}}
</li>
</ul>
Controller:
$scope.items = ['Item #1', 'Item #2', 'Item #3'];
$scope.$on('repeat-complete', function($event, args) {
// items ng-repeat is done rendering
// execute code
});
The name of a custom event can be defined. This event will be emitted when the repeat is completed. If no callback and no custom event are provided, a default event called repeat-complete
will be emitted.
- Type: string
- Event Arguments:
lastElement
,parent
- Default:
repeat-complete
(if nocallback
declared)
View:
<ul>
<li ng-repeat="item in items" repeat-complete event="itemsDone">
{{item}}
</li>
</ul>
Controller:
$scope.items = ['Item #1', 'Item #2', 'Item #3'];
$scope.$on('itemsDone', function($event, args) {
// "items" repeat complete - event fired!
});
###callback
A function can be passed as a callback. This callback will be executed when the repeat is completed.
View:
<ul>
<li ng-repeat="thing in things" repeat-complete callback="thingsDone()">
{{thing}}
</li>
</ul>
Controller:
$scope.things = ['Thing #1', 'Thing #2', 'Thing #3'];
$scope.thingsDone = function() {
// "things" repeat complete - callback ran!
};