Rethabile Rethabile - 5 months ago 30
HTML Question

How to limit an array with 10,000 objects thats linked to my angular ui-select?

I have an array with 10,000 objects in it and its crashing the browser every time I click on the select. Is there anyway to limit the

ui-select
to only show 10 on the screen at a time? Additionally, the library I am using is ui-select.

<ui-select ng-model="ed.main.user.UserID.selected" theme="bootstrap">
<ui-select-match placeholder="{{main.editTicket.UserDisplayName}}">
{{$select.selected.DisplayName}}
</ui-select-match>
<ui-select-choices repeat="t in main.users |filter:$select.search"value="{{$selected.UserID}}">
<div ng-bind-html="t.DisplayName | highlight: $select.search"></div>
<small ng-bind-html="t.UserID | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>

Answer

Check out limitTo e.g...

<select ng-model="model" ng-options="o as o for o in items | limitTo: 10"></select>

JSFiddle Link - demo


Per your update, modify your repeat as such

<ui-select-choices repeat="t in main.users | filter:$select.search | limitTo: 10"value="{{$selected.UserID}}">
    <div ng-bind-html="t.DisplayName | highlight: $select.search"></div>
    <small ng-bind-html="t.UserID | highlight: $select.search"></small>
</ui-select-choices>
Comments