I am using http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ . For a list more than 500 this drop-down is extremely slow to load. Takes a full minute to show the options. Is there any better alternate for this? Please suggest.
Angularjs Dropdown multiselect taking a long time to load
2.4k Views Asked by dinesh kumar At
2
You're encountering a fundamental challenge with the DOM that is often - erroneously - blamed on Angular. The simple fact is that creating and injecting 500 elements into the DOM is always going to be slow, whether you use Angular to do it, or something else. Angular makes this really easy to do with
ng-repeat, but you shouldn't do it. In this case, there seems to be 3 DOM elements per 'item', so you're actually creating 1500+ DOM elements for your 500 items. Scroll performance is also going to be horrendous.So, that's why you have the problem, but isn't a solution to your problem. First, I'd consider whether a multi-select is really a useful approach with 500 options. That sounds fundamentally confusing and difficult for the user. Something more like an auto-complete tagging interface (like SO's) might be a better fit with that many options, and will prevent you from needing to inject all of them into the DOM.
More generally, the best way to show a list of 500 items is... not to actually create 500 DOM elements. The best approaches right now involve creating only as many elements as will actually fit on-screen, and then recycling the content as you scroll. Adapting something like Ionic's collection-repeat directive to your use-case may improve performance significantly.
I don't see any way to make this particular directive perform better with 500 items, without a significant refactor along those lines. It's not bad code, but just wasn't designed for lists of that size.