0

I have an ng-repeat element that looks something like:

<div ng-repeat="message in messages | limitTo: customVariable">

where customVariable is constantly changed in my controller. Every time customVariable is changed, the parent / container element to the ng-repeat elements has its height adjusted since a different number of messages will pass the filter.

I need to get the before and after height of the parent div when this happens. I can get the before height with a simple call to the element height() method. For me to be able to get the after height, I need a callback that I can pass a function into after the DOM updates with changes from the limitTo filter.

How do I register such a callback? If the underlying array (in this case messages) for the ng-repeat changes, I can use the solution found here. But in this case, the underlying array stays the same.

Community
  • 1
  • 1
Lloyd Banks
  • 35,740
  • 58
  • 156
  • 248

1 Answers1

3

Save the filtered result by using as:

<div ng-repeat="message in messages | limitTo: customVariable as filteredMessages">

You can then add a watcher to this array from a controller or inside a directive and react to changes:

$scope.$watch(function() {
  return $scope.filteredMessages;
}, function() {
  // Do something
});

Demo: http://plnkr.co/edit/kQeLVJ2zLZCDeokyLqlW?p=preview

tasseKATT
  • 38,470
  • 8
  • 84
  • 65