Mpondomise Mpondomise - 22 days ago 7
AngularJS Question

angular ui-select not loading big list in dropdown

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.

AHC AHC
Answer

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