ng-repeat finish event ng-repeat finish event angularjs angularjs

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');    }  };});

See a live demo.


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()">