Apply Front End Pagination In Angular UI Select

Assume that their are 3000-4000 entries that you need to show with UI-select directive. Usually if you bind more than 500 entries in select box or UI-select the website will get stucked for some time if you click on the select box or UI-select , So how to solve this problem ?

Inorder to solve this problem you need two things:-

1. limitTo filter

2. A directive that alert controller that user has reached the bottom of list

Below writtten ui-select directive has no custom directive and limitTo filter . Here colleges is a array of JSON of length 7500 (in my project) . So every time when i refresh page  the list of colleges takes around 2 seconds load completely and when i click on ui-select directive it takes 15-20 sec to open options .So i end up with applying pagination in ui-select.

   

      <ui-select ng-model="education.clg" name="clg" theme="select2" append-to-body="true" sortable="true"  >
                  <ui-select-match placeholder="Select institution/university">{{$select.selected.name}}</ui-select-match>
                        <ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} >
                                 <div ng-bind-html="college.name | highlight: $select.search"></div>
                  </ui-select-choices>
         </ui-select>

 

Now add limitTo filter in "ui-select-choices"

                 

       <ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} >
                                 <div ng-bind-html="college.name | highlight: $select.search" | limitTo:currentElement"></div>
                        </ui-select-choices>

 

Here currentElement denote the number of element that will be visible on selection.This will reduce data binding time for example if i assign  currentElement=20 it will bind 20 element to ui-select.

Now Create a directive that determine user has reached bottom of the list.

 

angular.module('app',[]).directive('scrollDetector', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var raw = element[0];
            element.bind('scroll', function () {
                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
                  console.log("end of list");
                    scope.$apply(attrs.scrollDetector);
                }
            });
        }
    };
});

 

Lets use the above directive in ui-select and add scroll-detector=loadMore() in directive

     

    <ui-select-choices repeat="college in colleges | propsFilter: {name: $select.search} >
          <div ng-bind-html="college.name | highlight: $select.search" | limitTo:currentElement" scroll-detector="loadMore()">     </div>
         </ui-select-choices>

 

Now initialize currentElement in controller

$scope.currentElement=20;

Add loadMore() function in same controller

    $scope.loadMore=function(){
      console.log("loadMore");
      $scope.currentElement=$scope.currentElement+20;
    }

 

This will increment by 20 when user reach bottom of list. if you want to reset currrent element back to 20 if user click out side ui-select just use the below line to reset it back.

    var myDiv=angular.element(document.querySelector('#myDiv'));
    myDiv.click(function(){
      // reset back to 20
      $scope.currentElement=20;
    })

THANKS