Angular instruction Monitor Ng-repeat render complete

At work today, when you need to perform an operation using the Ng-repeat traversal rendering, the angular itself does not provide instructions for listening ng-repeat rendering completion, so you need to create your own custom directives.

Some special properties are exposed within the Ng-repeat template instance $index/$first/$middle/$last/$odd/$even, $index is incremented with each traversal (starting at 0), and the value of the $last is true when traversing to the last. So you can monitor the execution state of ng-repeat by judging the value of $last,

How to get the value of $last in the traversal process: custom directives

var app = Angular.module (' app ', []);

App.directive (' Repeatfinish ', function () {return
    {
        link:function (scope,element,attr) {
            Console.log ( Scope. $index)
            if (scope. $last = = true) {
                scope. $eval (Attr.repeatfinish);}}}
)

App.controller (' Appctrl ', function ($scope, $element) {
    $scope. arr = [1,2,3,4,5,6];
    $scope. tip = ';

    Defines the method to be executed after the repeat is completed, and the method name can be defined
    $scope. Repeatdone = function () {
        $scope. tip = ' Ng-repeat finished, I'm going to start doing something ... ';
Execute the event method you want to execute
    }
});

It is OK to invoke the instruction using angular when calling.

<div ng-repeat= "I in Arr" repeat-finish= "Repeatdone ();" >
    <p ng-bind= "i" ></p>
</div>

Demo