ng-repeat finish event
Indeed, you should use directives, and there is no event tied to the end of a ng-Repeat loop (as each element is constructed individually, and has it's own event). But a) using directives might be all you need and b) there are a few ng-Repeat specific properties you can use to make your "on ngRepeat finished" event.
Specifically, if all you want is to style/add events to the whole of the table, you can do so using in a directive that encompasses all the ngRepeat elements. On the other hand, if you want to address each element specifically, you can use a directive within the ngRepeat, and it will act on each element, after it is created.
Then, there are the $index
, $first
, $middle
and $last
properties you can use to trigger events. So for this HTML:
<div ng-controller="Ctrl" my-main-directive> <div ng-repeat="thing in things" my-repeat-directive> thing {{thing}} </div></div>
You can use directives like so:
angular.module('myApp', []).directive('myRepeatDirective', function() { return function(scope, element, attrs) { angular.element(element).css('color','blue'); if (scope.$last){ window.alert("im the last!"); } };}).directive('myMainDirective', function() { return function(scope, element, attrs) { angular.element(element).css('border','5px solid red'); };});
See it in action in this Plunker. Hope it helps!
If you simply want to execute some code at the end of the loop, here's a slightly simpler variation that doesn't require extra event handling:
<div ng-controller="Ctrl"> <div class="thing" ng-repeat="thing in things" my-post-repeat-directive> thing {{thing}} </div></div>
function Ctrl($scope) { $scope.things = [ 'A', 'B', 'C' ];}angular.module('myApp', []).directive('myPostRepeatDirective', function() { return function(scope, element, attrs) { if (scope.$last){ // iteration is complete, do whatever post-processing // is necessary element.parent().css('border', '1px solid black'); } };});
There is no need of creating a directive especially just to have a ng-repeat
complete event.
ng-init
does the magic for you.
<div ng-repeat="thing in things" ng-init="$last && finished()">
the $last
makes sure, that finished
only gets fired, when the last element has been rendered to the DOM.
Do not forget to create $scope.finished
event.
Happy Coding!!
EDIT: 23 Oct 2016
In case you also want to call the finished
function when there is no item in the array then you may use the following workaround
<div style="display:none" ng-init="things.length < 1 && finished()"></div>//or<div ng-if="things.length > 0" ng-init="finished()"></div>
Just add the above line on the top of the ng-repeat
element. It will check if the array is not having any value and call the function accordingly.
E.g.
<div ng-if="things.length > 0" ng-init="finished()"></div><div ng-repeat="thing in things" ng-init="$last && finished()">