0

We are trying to find a solution for displaying 10k checkboxes in the Umbraco back office that rendered with ng-repeat. We've realized that angularJs are not able to perform more than 2500 items in ng-repeat with data-binding.

I'm thinking about rendering parts of the array during the user scrolls the page, or it will be too much for ng-repeat as well?

Any recommendations?

Possible solutions:

  1. Paging
  2. Infinite scrolling - I would like to do it, but now sure what plugin to use

Thanks,

Alex

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Oleksandr Skrypnyk
  • 395
  • 2
  • 16

1 Answers1

2

Instead of using infinite scrolling, you can also use virtual scrolling (see difference here What are differences and use cases for Virtual VS Infinite scroll in Ionic 3). You can use virtual scrolling with angularJs, and you can find a library which uses it with ng-repeat angular-virtual-scroll.

Virtual scrolling ensures you only render (and keep on the DOM) elements the users sees, which means that most of the checkboxes out of the 10,000 you mentioned won't be visible. On top of that, I would also recommend using some sort of search or filter on the list of checkboxes, to make it easier for users to find what they are looking for.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Moshezauros
  • 2,493
  • 1
  • 11
  • 15