使用Angular填充大數組列表以進行下拉

Question

我面臨一個問題。 我有一個大約22K記錄的對象集合。 我需要將此綁定到一個選擇元素。 對於小型集合而言，綁定工作正常，但對於大型集合而言，它將凍結UI直至完全綁定。

請提出我在這里能做到的最好...

Answer 1

首先想到的是使用one-way data binding 。 這是通過在HTML變量之前附加::來實現的，如下所示

{{::someVar}}

這樣，angular的watchers中將不會包含someVar 。

如果那還不夠，那么您可以考慮出於自己的目的編寫特殊類型的select ，可以在其后面使用ClusterizeJS之類的東西。

ClusterizeJS只允許在屏幕上渲染幾個元素，並在滾動時重新渲染，這樣用戶就永遠不會知道並非所有元素都已經存在於select 。 結合使用search bar ，您將獲得非常快速的select 。

Answer 2

通常，用大量記錄填充<select>元素是不明智的。 無論使用哪種框架，這都適用（盡管對於Angular和雙向數據綁定而言，這尤其糟糕）。

在希望用戶能夠從大量選項中進行選擇的地方，我建議使用“自動完成”風格的界面，其中用戶鍵入一些字符，而客戶端則提取與其到目前為止鍵入的內容匹配的選項。

例如，您可以使用Angular-UI選擇