angular ui-select not loading big list in dropdown

Question

Here is my json file of the cities of the world: google drive link.

and here is my html code:

<div class="form-group">
    <label class="control-label">
        CITY
    </label>
    <ui-select name="city" ng-model="myModel.city" theme="selectize" >
        <ui-select-match placeholder="{{ 'placeholders.project.city' | translate }}">
            {{$select.selected}}
        </ui-select-match>
        <ui-select-choices repeat="r in selectedcity | filter: $select.search">
            <div ng-bind-html="r | highlight: $select.search"></div>
        </ui-select-choices>
    </ui-select>
</div>

why the list of some countries is not loading? is the problem with the json file? or is it because some countries have a big list of cities? is it because it surpasses the ui-select limit? some countries load the list, and some doesn't, it is empty.

Can you please provide a JSFiddle https://jsfiddle.net with your code. Thanks. — Tome Pejoski, Nov 12 '16 at 14:14

score 4 · Accepted Answer · answered Nov 13 '16 at 00:19

4

you have to limit the view to a small number to have a good performance, like | limitTo: 10:

<ui-select-choices repeat="r in selectedcity | filter: $select.search | limitTo: 10">

answered Nov 13 '16 at 00:19

Marcel

2,764
1
24
40

angular ui-select not loading big list in dropdown

1 Answers1