ng-repeat finish event

Question

I want to call some jQuery function targeting div with table  That table is populated with ng-repeat     When I call it on     document  ready     I have no result     Also    scope  on   viewContentLoaded   myFunc     doesn t help   Is there any way to execute function right after ng-repeat population completes  I ve read an advice about using custom directive  but I have no clue how to use it with ng-repeat and my div

User · Answer

Here s a simple approach using ng-init that doesn t even require a custom directive  It s worked well for me in certain scenarios e g  needing to auto-scroll a div of ng-repeated items to a particular item on page load  so the scrolling function needs to wait until the ng-repeat has finished rendering to the DOM before it can fire    lt div ng-controller  MyCtrl  gt       lt div ng-repeat  thing in things  gt          thing     thing         lt  div gt       lt div ng-init  fireEvent    gt  lt  div gt   lt  div gt      myModule controller  MyCtrl   function  scope   timeout        scope things     A    B    C          scope fireEvent   function                This will only run after the ng-repeat has rendered its things to the DOM          timeout function                 scope  broadcast  thingsRendered               0                 Note that this is only useful for functions you need to call one time after the ng-repeat renders initially  If you need to call a function whenever the ng-repeat contents are updated then you ll have to use one of the other answers on this thread with a custom directive

User · Answer

I did it this way   Create the directive  function finRepeat         return function scope  element  attrs            if  scope  last                  Here is where already executes the jquery               document  ready function                        materialboxed   materialbox                        tooltipped   tooltip  delay  50                                       angular      module  app        directive  finRepeat   finRepeat     After you add it on the label where this ng-repeat   lt ul gt       lt li ng-repeat   key  value  in data  fin-repeat gt     value     lt  li gt   lt  ul gt    And ready with that will be run at the end of the ng-repeat

User · Answer

Indeed  you should use directives  and there is no event tied to the end of a ng-Repeat loop  as each element is constructed individually  and has it s own event   But a  using directives might be all you need and b  there are a few ng-Repeat specific properties you can use to make your  on ngRepeat finished  event   Specifically  if all you want is to style add events to the whole of the table  you can do so using in a directive that encompasses all the ngRepeat elements  On the other hand  if you want to address each element specifically  you can use a directive within the ngRepeat  and it will act on each element  after it is created   Then  there are the  index   first   middle and  last properties you can use to trigger events  So for this HTML    lt div ng-controller  Ctrl  my-main-directive gt     lt div ng-repeat  thing in things  my-repeat-directive gt      thing   thing      lt  div gt   lt  div gt    You can use directives like so   angular module  myApp        directive  myRepeatDirective   function       return function scope  element  attrs        angular element element  css  color   blue        if  scope  last         window alert  im the last                    directive  myMainDirective   function       return function scope  element  attrs        angular element element  css  border   5px solid red               See it in action in this Plunker  Hope it helps

User · Answer

Here is a repeat-done directive that calls a specified function when true   I have found that the called function must use  timeout with interval 0 before doing DOM manipulation  such as initializing tooltips on the rendered elements   jsFiddle  http   jsfiddle net tQw6w   In  scope layoutDone  try commenting out the  timeout line and uncommenting the  NOT CORRECT   line to see the difference in the tooltips    lt ul gt       lt li ng-repeat  feed in feedList  repeat-done  layoutDone    ng-cloak gt       lt a href    feed    title  view at   feed   hostName    data-toggle  tooltip  gt   feed   strip http   lt  a gt       lt  li gt   lt  ul gt    JS   angular module  Repeat Demo             directive  repeatDone   function             return function scope  element  attrs                if  scope  last       all are rendered                 scope  eval attrs repeatDone                                        filter  strip http   function             return function str                var http    http                  return  str indexOf http     0    str substr http length    str                         filter  hostName   function             return function str                var urlParser   document createElement  a                urlParser href   str              return urlParser hostname                         controller  AppCtrl   function  scope   timeout              scope feedList                  http   feeds feedburner com TEDTalks video                http   feeds nationalgeographic com ng photography photo-of-the-day                 http   sfbay craigslist org eng index rss                http   www slate com blogs trending fulltext all 10 rss                http   feeds current com homepage en US rss                http   feeds current com items popular rss                http   www nytimes com services xml rss nyt HomePage xml                       scope layoutDone   function                      a data-toggle  tooltip     tooltip       NOT CORRECT               timeout function        a data-toggle  tooltip     tooltip       0      wait

User · Answer

Maybe a bit simpler approach with ngInit and Lodash s debounce method without the need of custom directive   Controller    scope items    1  2  3  4     scope refresh     debounce function            Debounce has timeout and prevents multiple calls  so this will be called         once the iteration finishes     console log  we are done       0     Template    lt ul gt       lt li ng-repeat  item in items  ng-init  refresh    gt   item   lt  li gt   lt  ul gt      Update  There is even simpler pure AngularJS solution using ternary operator   Template    lt ul gt       lt li ng-repeat  item in items  ng-init   last   doSomething     null  gt   item   lt  li gt   lt  ul gt    Be aware that ngInit uses pre-link compilation phase - i e  the expression is invoked before child directives are processed  This means that still an asynchronous processing might be required

User · Answer

lt div ng-repeat  i in items  gt           lt label gt   i Name   lt  label gt                       lt div ng-if   last  ng-init  ngRepeatFinished    gt  lt  div gt               lt  div gt    My solution was to add a div to call a function if the item was the last in a repeat

User · Answer

This is an improvement of the ideas expressed in other answers in order to show how to gain access to the ngRepeat properties   index   first   middle   last   even   odd  when using declarative syntax and isolate scope  Google recommended best practice  with an element-directive   Note the primary difference  scope  parent  last   angular module  myApp        directive  myRepeatDirective   function       return       restrict   E       scope          someAttr                 link  function scope  element  attrs          angular element element  css  color   blue          if  scope  parent  last           window alert  im the last

User · Answer

i would like to add another answer  since the preceding answers takes it that the code needed to run after the ngRepeat is done is an angular code  which in that case all answers above give a great and simple solution  some more generic than others  and in case its important the digest life cycle stage you can take a look at Ben Nadel s blog about it  with the exception of using  parse instead of  eval   but in my experience  as the OP states  its usually running some JQuery plugins or methods on the finnaly compiled DOM  which in that case i found that the most simple solution is to create a directive with a setTimeout  since the setTimeout function gets pushed to the end of the queue of the browser  its always right after everything is done in angular  usually ngReapet which continues after its parents postLinking function  angular module  myApp        directive  pluginNameOrWhatever   function       return function scope  element  attrs                setTimeout function doWork            jquery code and plugins        0                      for whoever wondering that in that case why not to use  timeout  its that it causes another digest cycle that is completely unnecessary

User · Answer

It may also be necessary when you check the scope  last variable to wrap your trigger with a setTimeout someFn  0   A setTimeout 0 is an accepted technique in javascript and it was imperative for my directive to run correctly

User · Answer

I had to render formulas using MathJax after ng-repeat ends  none of the above answers solved my problem  so I made like below  It s not a nice solution  but worked for me      lt div ng-repeat  formula in controller formulas  gt       lt div gt   formula string   lt  div gt         last   controller render formulas           lt  div gt

User · Answer

There is no need of creating a directive especially just to have a ng-repeat complete event   ng-init does the magic for you      lt div ng-repeat  thing in things  ng-init   last  amp  amp  finished    gt    the  last makes sure  that finished only gets fired  when the last element has been rendered to the DOM   Do not forget to create  scope finished event   Happy Coding    EDIT  23 Oct 2016  In case you also want to call the finished function when there is no item in the array then you may use the following workaround   lt div style  display none  ng-init  things length  lt  1  amp  amp  finished    gt  lt  div gt    or  lt div ng-if  things length  gt  0  ng-init  finished    gt  lt  div gt    Just add the above line on the top of the ng-repeat element  It will check if the array is not having any value and call the function accordingly   E g    lt div ng-if  things length  gt  0  ng-init  finished    gt  lt  div gt   lt div ng-repeat  thing in things  ng-init   last  amp  amp  finished    gt

User · Answer

I found an answer here well practiced  but it was still necessary to add a delay  Create the following directive   angular module  MyApp   directive  emitLastRepeaterElement   function     return function scope        if  scope  last           scope  emit  LastRepeaterElement                   Add it to your repeater as an attribute  like this    lt div ng-repeat  item in items  emit-last-repeater-element gt  lt  div gt    According to Radu     scope eventoSelecionado internamento evolucoes forEach ie   gt   mycode      For me it works  but I still need to add a setTimeout   scope eventoSelecionado internamento evolucoes forEach ie   gt    setTimeout function          mycode    100

User · Answer

If you simply want to execute some code at the end of the loop  here s a slightly simpler variation that doesn t require extra event handling    lt div ng-controller  Ctrl  gt     lt div class  thing  ng-repeat  thing in things  my-post-repeat-directive gt      thing   thing      lt  div gt   lt  div gt    function Ctrl  scope       scope things          A    B    C            angular module  myApp        directive  myPostRepeatDirective   function       return function scope  element  attrs        if  scope  last            iteration is complete  do whatever post-processing          is necessary       element parent   css  border    1px solid black                       See a live demo

User · Answer

Complementing Pavel s answer  something more readable and easily understandable would be   lt ul gt       lt li ng-repeat  quot item in items quot           ng-init  quot  last   doSomething     angular noop   quot  gt   item   lt  li gt   lt  ul gt   Why else do you think angular noop is there in the first place     Advantages  You don t have to write a directive for this

User · Answer

If you simply wants to change the class name so it will rendered differently  below code would do the trick    lt div gt   lt div ng-show  loginsuccess  ng-repeat  i in itemList  gt       lt div id    i status    class    i status    gt           lt div class  listitems  gt   i item   lt  div gt           lt div class  listitems  gt   i qty   lt  div gt           lt div class  listitems  gt   i date   lt  div gt           lt div class  listbutton  gt               lt button ng-click  UpdateStatus i  id   class  btn  gt  lt span gt Done lt  span gt  lt  button gt               lt button ng-click  changeClass    class  btn  gt  lt span gt Remove lt  span gt  lt  button gt           lt  div gt       lt hr gt   lt  div gt      This code worked for me when I had a similar requirement to render the shopped item in my shopping list in Strick trough font

[javascript] ng-repeat finish event

Examples related to javascript

Examples related to jquery

Examples related to angularjs

Examples related to angularjs-ng-repeat

Examples related to document-ready