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。