Я пытаюсь отобразить список {значок флага страны + имя + код набора телефона}, я использовал 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.