Question

我正在尝试显示{country flag icon + name + phone dial code}的列表，我使用了ui-select来实现这个角度，这是我用过的代码

<ui-select ng-model="viewModel.homePhoneCountryCode" theme="bootstrap" id="homePhoneCountryCode" name="homePhoneCountryCode" ng-disabled="disabled">
    <ui-select-match>
        {{$select.selected.phoneCode}}
    </ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
        <img ng-src="{{country.imageUrl}}" />
             <span ng-bind-html="country.name | highlight: $select.search"></span>
             <span ng-bind-html="country.phoneCode | highlight: $select.search"></span>
    </ui-select-choices>
</ui-select>

列表显示正常，但单击列表以选择一个选项时似乎存在一些性能问题，并且它不是第一次单独存在滞后但是后续点击也是如此，即使图像正在由浏览器缓存。

列表中有大约236个项目，标志图标来自http://www.famfamfam.com/lab/icons/flags/，尺寸相对较小

另一个问题是，当文本输入到搜索/过滤器输入时，页面似乎卡在一条消息中，表明长时间运行的js是原因。

问题1：这是在列表中显示远程图像的正确方法吗？

问题2：ui-select是否有延迟加载的方法。

问题3：如果这是ui-select的一些问题，那么我可以探索的其他选项适用于角度。

Answer 1

问题2：仅适用于延迟加载图像。我在bootstrap轮播中使用，我有一些延迟加载图像数组的问题。我所做的是创建2个不同的阵列 - 一个与当前的3个图像，并与所有其他存在的图像进行对比。在第一个数组中，我只加载3个图像，每次点击下一个或perv按钮我从第二个数组中取出另一个图像并用第一个数组替换它（我希望我足够清楚）。

Answer 2

虽然我没有亲身经历过这个问题，但我确实查看了你所描述的角度回购中是否存在任何问题。我遇到了this link，似乎存在ui-select-choices和大量图片的性能问题。根据@askhogan：

我认为性能问题是由于ui-select-choices指令中的ng-repeat机制造成的。我注释掉了代码的这一部分，应用程序再次响应。选择的选择下拉列表似乎是立即处理，而不是单击它时。如果你在同一页面上有（多个选择*几个select-ui搜索框），它将极大地减慢页面加载速度。我相信解决方案是延迟处理下拉选项，直到点击一个select-ui搜索框，但我仍在调查...

不幸的是，这似乎是一个持续的问题。我读过其中的一些内容，看看人们想出了什么样的黑客行为。

Angular ui-select with images

2 个答案: