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
There are 2 best solutions below
Related Questions in JAVASCRIPT
- Using Puppeteer to scrape a public API only when the data changes
- inline SVG text (js)
- An array of images and a for loop display the buttons. How to assign each button to open its own block by name?
- Storing the preferred font-size in localStorage
- Simple movie API request not showing up in the console log
- Authenticate Flask rest API
- Deploying sveltekit app with gunjs on vercel throws cannot find module './lib/text-encoding'
- How to request administrator rights?
- mp4 embedded videos within github pages website not loading
- Scrimba tutorial was working, suddenly stopped even trying the default
- In Datatables, start value resets to 0, when column sorting
- How do I link two models in mongoose?
- parameter values only being sent to certain columns in google sheet?
- Run main several times of wasm in browser
- Variable inside a Variable, not updating
Related Questions in JQUERY
- In Datatables, start value resets to 0, when column sorting
- Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
- window.location.href redirects but is causing problems on the webpage
- Using JQuery Date Slider
- Storing selected language in localStorage
- How to stop other divs from still showing when i click a different button?
- Check multiple values with jQuery
- Bootstrap component does not want to render in Datatables function
- put white spaces when entering an amount moneytype symfony
- Trouble accessing custom header in AJAX response using jQuery in Fiware Keyrock
- I just cant make it work, HTML, JS and Firebase error
- Didn't declared variable still not getting any error in JavaScript
- Move element horizontally while scrolling vertically in pure JavaScript
- allow multi carousel in same page
- Embedded TikTok posts / thumbnail styling issue
Related Questions in ANGULARJS
- How to automatically change path in angular when scrolling
- Error two clicks to be able to login Angular 16
- Passing an array of objects through the $http.post method in angular JS does not work
- Understanding how to apply Angular Signals from beginning on an existing service
- provider duplicate while compiling a Cordova application for the Android platform
- How can I use angularjs $parse service in Angular?
- Width of custom headers in ag-grid (angular) doesn't match with column's width
- Issues with Katex/ngx-markdown Rendering in Angular 16
- How to make Angular SSR wait for async operations to finish that are initiated in ngOnInit?
- I want to install @angular/google-maps npm Package in angular 16.2.12 but "npm install @angular/google-maps" this is not working/ tell me other query
- Angular 17 standalone application integrate CKEditor 5 -- Error: window is not defined
- Why is $scope >= 0 showing true in interpolation while empty in controller?
- The XMLHttpRequest compatibility library was not found
- Making Gantt Chart Column Labels More Readable
- Pass key-value pairs of object as individual arguments to component in Angular
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular # Hahtags
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
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.