带图像的角度用户界面选择

Angular ui-select with images

本文关键字：用户界面 选择 图像      更新时间：2023-09-26

我正在尝试显示一个{国家/地区标志图标+姓名+电话拨号代码}的列表，我使用ui select在angular中实现了这一点，这是我使用的代码

<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有问题，我可以探索另一个使用angular的选项吗。

虽然我没有亲身经历过这个问题，但我确实查找了您所描述的角度回购中是否存在任何问题。我看到了这个链接，ui选择和许多图像似乎存在性能问题。根据@askhogan:

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

不幸的是，这似乎是一个持续的问题。我通读了其中的一些内容，看看人们想出了什么样的破解方法。

问题2：仅用于延迟加载图像。我在引导程序转盘中使用过，我对图像数组的延迟加载有一些问题。我所做的是创建两个不同的数组——一个是当前的3个图像，另一个是现有的所有其他图像。在第一个数组中，我只加载3个图像，每次点击next或perv按钮，我都会从第二个数组中获取另一个图像，并用第一个数组替换它（我希望我足够清楚）。

相关文章：