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

Question

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>

1st thing the you should not bind 10,000 objects to your `ui-select`, it may hangs you browser..you should those options lazily as user types an input — Pankaj Parkar, Oct 12 '15 at 21:02

scniro · Accepted Answer · 2015-10-12T21:10:04.870

10

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>

edited Oct 12 '15 at 21:10

answered Oct 12 '15 at 21:02

scniro

16,844
8
62
106

Thank you for the response. I am using ui-select repeat and tried the above example but it still crashes the browser when I click on the select. I'll add my code. – Rethabile Oct 12 '15 at 21:05
@Rethabile I attempted to update my answer for your situation. Could you check it out? – scniro Oct 12 '15 at 21:12
I'm not familiar with the angular ui-select, but doesn't it implement something like infinite scroll paging or similar? – Juri Oct 13 '15 at 05:45
@Juri unsure, I was checking out the [ui-select](https://github.com/angular-ui/ui-select/wiki/ui-select) docs and couldn't see anything apparent – scniro Oct 13 '15 at 13:13

score 1 · Answer 2 · edited May 23 '17 at 12:10

Her is my solution which lets you replenish new items on scroll. Also works for filtered lists that may be too big.

       <ui-select-choices 
         position="up" 
         all-choices="ctrl.allTenThousandItems"  
         refresh-delay="0"
         repeat="person in $select.pageOptions.people | propsFilter: {name: $select.search, age: $select.search} ">
      <div ng-bind-html="person.name | highlight: $select.search"></div>
      <small>
         email: {{person.email}}
         age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
       </small>
   </ui-select-choices>

Detailed Answer

Plunkr

score 0 · Answer 3 · answered Oct 09 '18 at 09:55

Use only limitTo:itemsPerPage in html. Change limitTo value dynamically by using $timeout function. call addMoreChoices() from where you want to load more options.

 addMoreChoices();
function addMoreChoices(){
            if($scope.itemsPerPage<$scope.List.length){
                $scope.itemsPerPage += 100;
                $timeout(addMoreChoices, 100);
            }
        }

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

3 Answers3