2

I am using deckgrid in conjunction with a custom built infinite scroller to load a continuous stream of photos in Angular laid out in a masonry layout. The data set returned each time is quite large and I had noticed that deckgrid calls quick-ng-repeat on the data set to generate the cards. Deckgrid also places a watchCollection on the data set so when the data set changes (triggered by appending data to the data set when user scrolls to the bottom), the ng-repeat will re render everything in the data set (old and new data alike).

Unfortunately, re rendering each card is extremely expensive given the size of the data set and other post processing that my application has to do. I want to be able to leave the already rendered cards as is and only render new cards with the newly fetched data. In other words is there a way for ng-repeat to un bind on elements that have already been rendered?

sc_1824
  • 43
  • 4
  • 1
    Hello and welcome to StackOverflow! I recommend you have a look at our help center, particularly [MCVE](http://stackoverflow.com/help/mcve). It is hard to tell from your question what it is you have tried, and where you are stuck. I would say, your question may be at rick of being flagged for removal due to the open ended nature of the question [avoid](http://stackoverflow.com/help/dont-ask). – 1800 INFORMATION Sep 30 '15 at 22:53
  • angular has a one time binding syntax (`::propertyName`), however it's not obvious without accompanying code here if that syntax would solve your issue. – Claies Sep 30 '15 at 23:23

1 Answers1

0

We had to add track by $index to the deckgrid directive. This rendered only the new DOM elements.

https://docs.angularjs.org/api/ng/directive/ngRepeat

ashields
  • 16
  • 1