1

I have 2 ng-repeats in my code, and i would like to call a function when both of these ng-repeats have completed their loop. It's actually the same repeat twice but with a different filter applied. I need both of the repeats to be completed before I can get the correct height property of the body.

My code looks something like this

<ul>
     <li ng-repeat="item in items|filter:{Type:'1'}>{{item.Name}}</li>
</ul>
<!-- some irrelevant code -->
<ul>
     <li ng-repeat="item in items|filter:{Type:'2'}>{{item.Name}}</li>
</ul>

Is there a way to get this done using a directive?

Josep
  • 12,515
  • 2
  • 39
  • 44
JazzVH
  • 11
  • 3
  • So, what you want is to be notified immediately after the 2 of them have finished rendering so that you can apply certain styles based on the dimensions of the rendered lists? – Josep Oct 01 '14 at 13:11
  • Exactly what i'm looking for – JazzVH Oct 01 '14 at 13:14
  • You'll need your own directive for this. Something like this: http://stackoverflow.com/questions/19864007/angularjs-event-for-when-model-binding-or-ng-repeat-is-complete or this http://www.bennadel.com/blog/2592-hooking-into-the-complete-event-of-an-ngrepeat-loop-in-angularjs.htm – Darren Wainwright Oct 01 '14 at 13:14
  • @JazzVH Then, have a look at this: http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished/26091943#26091943 – Josep Oct 01 '14 at 13:17
  • That's what I thougt, but the problem here is that the trigger can only take place when bóth of the repeats have finished. Otherwise, when one of the repeats triggers the call, the dimensions I get could be insufficiënt for the objects in the repeat that hasn't finished looping yet.. – JazzVH Oct 01 '14 at 13:19
  • @JazzVH sorry but you are wrong, I can guarantee you that by the time that you handle that event, both lists will have finished rendering... And you only need to register that filter in 1 of the ngRepeats. I know it because I wrote it and because basically what that trick is doing is to emit an event once the diggest loop has finished and the view have been re-rendered, so by the time the event gets fired, everything will have been re-rendered. Try it out! Thanks! – Josep Oct 01 '14 at 13:37
  • @Josep I managed finishing my app without using your hack, but i'm working on a different one now where I actually do need to use your solution. I don't really understand why there isn't a solution for this in angular itself. I'm trying this solution now, but it's giving me this error for the moment : Cannot read property 'finishedRendering' of undefined. Any idea what might cause this? Could it have something to do with the version of angular i'm using (1.3.2) ? – JazzVH Nov 24 '14 at 13:39

0 Answers0