/**
* fork from http://jsfiddle.net/JohnHarley/sEq7Y/
*/
(function(angular, jQuery) {
'use strict';
var module = angular.module('App', ['ngAnimate']);
module.directive('onFinishRender', [
'$timeout',
function($timeout) {
return {
'restrict': 'A',
'link': function(scope, element, attr) {
var emit = function() {
if (scope.$last) {
$timeout(function() {
window.console.log('ngRepeatFinished!!!')
scope.$emit('ngRepeatFinished');
});
}
};
if (attr.onFinishRender === 'true') {
emit();
}
else {
scope.$watch('$last', emit);
}
}
};
}
]);
module.controller('myC', [
'$scope',
'$timeout',
function($scope, $timeout) {
$scope.$on('ngRepeatFinished', function() {
jQuery(".Last-false").css("color", "black");
jQuery(".Last-true").css("color", "red");
});
}
]);
})(window.angular, window.jQuery);
<div ng-app="App" ng-controller="myC">
<div ng-init="friends = [
{name:'John', age:25, gender:'boy'},
{name:'Jessie', age:30, gender:'girl'},
{name:'Johanna', age:28, gender:'girl'},
{name:'Joy', age:15, gender:'girl'},
{name:'Mary', age:28, gender:'girl'},
{name:'Peter', age:95, gender:'boy'},
{name:'Sebastian', age:50, gender:'boy'},
{name:'Erika', age:27, gender:'girl'},
{name:'Patrick', age:40, gender:'boy'},
{name:'Samantha', age:60, gender:'girl'}
]">I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." />
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="friend in friends | filter:q" on-finish-render>
<div class="Last-{{$last}}">[{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.</div>
</li>
</ul>
</div>
</div>
.example-animate-container {
background: white;
border: 1px solid black;
list-style: none;
margin: 0;
padding: 0 10px;
}
.animate-repeat {
line-height: 40px;
list-style: none;
box-sizing: border-box;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity: 0;
max-height: 0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity: 1;
max-height: 40px;
}
.Number3 {
color: #AA1111;
}
External resources loaded into this fiddle: