使用Angular填充大数组列表以下拉



我正面临一个问题。我有一个对象的大小约22K记录的集合。我需要将它绑定到一个select元素。绑定在小集合中工作得很好,但是这么大的集合会冻结UI,直到绑定完成。

请建议我能做的最好的....

首先想到的是使用one-way data binding。这可以通过在HTML变量前面附加::来实现,如

{{::someVar}}

这样,angular就不会在它的watchers中包含someVar

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

ClusterizeJS只允许在屏幕上呈现一些元素,并在滚动时重新呈现,这样用户永远不会知道并非所有元素都已经存在于select中。把它和search bar结合起来,你就得到了一个非常快的select

一般来说,用如此大量的记录填充<select>元素是不明智的。无论你使用的是哪个框架,这都适用(尽管在Angular和双向数据绑定的情况下尤其糟糕)。

如果你希望用户能够从大量选项中进行选择,我建议使用"自动完成"风格的界面,用户输入几个字符,客户端获取与他们目前输入的内容相匹配的选项。

例如,你可以使用Angular-UI select