Angular ui-select with images

Question

I am trying to display a list of { country flag icon + name + phone dial code }, I have used ui-select for implementing this in angular, this is the code that I have used

<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>

The list shows up fine except there seems to be some performance issue when the list is clicked to select a choice and it is not the first time alone that there is a lag but on subsequent clicks as well even though the images are being cached by the browser.

There are around 236 items in the list the flag icons are from http://www.famfamfam.com/lab/icons/flags/ which are relatively small in size

Another issue is that at times when text is input into the search/ filter input the page seems to get stuck with a message indicating a long running js being the cause.

Question 1 : Is this the right way to display remote images in a list.

Question 2 : Is there a way to lazy load in ui-select.

Question 3 : If this is some issue with ui-select is there another option which I could explore that works with angular.

score 0 · Answer 1 · answered Apr 30 '16 at 20:54

0

Question 2: Only for lazy loading of images. I used in bootstrap carousel and I had some issue with lazy loading of array of images. What I did is to create 2 different array- one with the current 3 images, and seconed with all other images that exists. in the first array I load only 3 image and every click on next or perv button I took another image from the second array and replace it with the first array (I hope the I was clear enough) .

answered Apr 30 '16 at 20:54

The scion

1,001
9
19

yes that could work with a carousel but I am afraid I would need to stick to a select list – Abhilash Apr 30 '16 at 21:02

score 0 · Accepted Answer · answered Apr 30 '16 at 20:56

While I haven't personally experienced this issue, I did look up if there were any issues in the angular repo for what you're describing. I came across this link and there seems to be a performance issue with ui-select-choices and a lot of images. According to @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...

Unfortunately it seems to be an ongoing issue. I'd read through some of that to see what various hacks people came up with.

hmm yes just came across that link, seems like moving over to https://github.com/machineboy2045/angular-selectize would be a good option — Abhilash, Apr 30 '16 at 21:00

Angular ui-select with images

2 Answers2