Seeking a solution to trigger a callback function after AngularJS's ng-repeat orderBy filter has finished rendering...
Code:
<div ng-controller="MyCtrl">
<table>
<thead>
<tr>
<th ng-click="sort('name')">Name:</th>
<th ng-click="sort('age')">Age:</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:sortColumn:reverseSort">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
JavaScript:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.items = [{
"name": "John",
"age": 25
}, {
"name": "Amy",
"age": 75
}, {
"name": "Sarah",
"age": 12
}, {
"name": "Matt",
"age": 55
}, {
"name": "Xaviour",
"age": 2
}];
$scope.sortColumn = 'name';
$scope.reverseSort = false;
$scope.sort = function (column) {
$scope.sortColumn = column;
$scope.reverseSort = !$scope.reverseSort;
};
$scope.sortRenderFinished = function(){
console.log('Done Rendering!');
//Custom action here
};
}
If you have any insights on how to execute $scope.sortRenderFinished() once the orderBy filter has completed reordering the table rows, your assistance would be greatly appreciated! :-)