Angular ui-select 带图片

Question

我正在尝试显示{国旗图标+姓名+phone拨号代码}的列表，我在[=29]中使用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>

该列表显示正常，除了单击列表以 select 选择时似乎存在一些性能问题，这不是第一次单独出现滞后，但在随后的点击中也是如此即使图像正在被浏览器缓存。

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

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

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

问题2：ui-select.

有延迟加载的方法吗

问题 3：如果这是 ui-select 的一些问题，是否还有另一个我可以探索的选项，它适用于 angular。

Answer 1

问题2：只针对懒加载图片。我在 bootstrap 轮播中使用过，我在延迟加载图像数组时遇到了一些问题。我所做的是创建 2 个不同的数组 - 一个包含当前的 3 个图像，第二个包含所有其他存在的图像。在第一个数组中，我只加载了 3 张图片，每次单击 next 或 perv 按钮时，我都会从第二个数组中获取另一张图片并将其替换为第一个数组（我希望我足够清楚）。

Answer 2

虽然我个人没有遇到过这个问题，但我确实在 angular 存储库中查找了您所描述的内容是否存在任何问题。我遇到了 this link，ui-select-选项和大量图像似乎存在性能问题。根据@askhogan：

I believe the performance issues are due to the ng-repeat mechanism in the ui-select-choices directive. I commented out this section of the code and the app became responsive again. It appears that the select dropdown list of choices is getting processed immediately, instead of when it is clicked on. If you have (several choices * several select-ui search boxes) on the same page it will slow down page load tremendously. I believe the solution is to delay the processing of the dropdown choices until a select-ui search box is clicked on, but I am still investigating...

不幸的是，这似乎是一个持续存在的问题。我通读了其中的一些内容，以了解人们想出的各种技巧。

Angular ui-select 带图片

Angular ui-select with images

javascript

angularjs

ui-select