使用Angular填充大阵列列表下拉

Question

我正面临一个问题。我有一个大小约为22K记录的对象集合。我需要将它绑定到一个select元素。绑定对于小集合工作正常，但是这样一个大集合正在冻结UI，直到它完全绑定为止。

请建议我可以在这里做的最好....

弹出想到的是使用 one-way data binding

Answer 1

的第一件事。这是在你的HTML变量之前附加::像这样

{{::someVar}} 

通过这种方式来实现，将角不包括在其watcherssomeVar。

如果这还不够，那么你可以考虑为自己的目的写一个特殊类型的select，它可以使用类似ClusterizeJS之类的东西。

ClusterizeJS只允许在屏幕上渲染几个元素并在滚动条上重新渲染，这样用户永远不会知道select中的所有元素都不存在。把它与search bar结合在一起，你就可以非常快速地使用select。

Answer 2

一般来说，用这么多的记录填充<select>元素是不明智的。无论您使用的是哪种框架，这都适用（尽管对于Angular和双向数据绑定来说这样做会特别糟糕）。

如果您希望用户能够从大量选项中进行选择，我建议您使用“自动填充”界面风格，其中用户键入几个字符，然后客户端获取与他们所拥有的选项匹配的选项迄今键入。

例如，您可以使用Angular-UI select