Angularjs Dropdown多選選擇需要很長時間加載

Question

我正在使用 http://dotansimha.github.io/angularjs-dropdown-multiselect/#/ 。對於超過500個的列表，此下拉列表的加載速度非常慢。花費一整分鐘來顯示選項。有沒有更好的替代方案？請建議。

Answer 1

你遇到了一個常常 - 錯誤地被歸咎於Angular的DOM的根本挑戰。簡單的事實是，創建並向DOM注入500個元素總是會很慢，無論您​​是使用Angular來完成它，還是其他的事情。 Angular使得這與ng-repeat很容易做到，但你不應該這樣做。在這種情況下，每個「item」似乎有3個DOM元素，所以實際上爲500個項目創建了1500多個DOM元素。滾動表現也將是可怕的。

那麼，這是爲什麼你有問題，但不是你的問題的解決方案。首先，我會考慮多選是否真的是一個有500個選項的有用方法。這聽起來基本上令用戶感到困惑和困難。更像是一個自動完成的標記界面（如SO）可能更適合這些選項，並且會阻止您將所有這些選項注入到DOM中。

更一般地說，顯示500個項目列表的最佳方式是......不是實際創建500個DOM元素。目前最好的方法是隻創建儘可能多的元素，然後在屏幕上進行回收，然後在滾動時回收內容。將諸如Ionic's collection-repeat directive之類的東西適配到您的用例可能會顯着提高性能。

我看不出有什麼辦法可以使這個特定的指令在500條記錄中執行得更好，而不會在這些行中產生重大的重構。這不是錯誤的代碼，但只是沒有爲這個大小的列表而設計。

Answer 2

我有同樣的問題。 只需將$ ajax請求更改爲'async：false'即可解決問題。

讓$ ajax請求先完成然後加載DOM。 在'async：true'請求的情況下，它不會等待服務器響應並加載DOM。