2017-12-04 14 views
1

스크롤에 따라 선택 상자에 페이지 매김을 할어떻게 HTML

<select class="form-control choice requiredField" id-available name="SelectData" ng-model="box.box_id" title="Select"> 
    <option value="" disabled selected>{{'_SELECT_BEACON_' | i18n}}</option> 
    <option value="{{y.box_id}}" ng-repeat="y in dataList" class="nms">{{y.beacon_code}}</option> 
</select> 

여기

boxService.listUnassignedDevice(function(res) { 
    $scope.dataList = res; 
}, function(error) { 
}); 

를 AngularJS와 나는 "데이터 목록"에 대용량 데이터를 (10000>). 그래서 마우스를 아래로 스크롤 한 후 선택 상자에 데이터를 표시해야합니다. 먼저 마우스를 아래로 스크롤하면 100 개의 데이터를 표시해야하며 API에서 다음 100 개의 데이터를 표시해야합니다.

+1

소리가 끔찍한 UI와 비슷합니다. 많은 값을 사용하면 처음에는 선택 필드를 사용하지 말고 일부 자동 완성 솔루션을 사용해야합니다. – CBroe

답변

0

ngInfiniteScroll 지시문을 사용하고 스크립트 태그를 추가 한 다음 모듈 'infinite-scroll'을 추가 한 다음 요소에 무한 스크롤 속성을 지정하여 지시문을 사용할 수 있습니다.

<div infinite-scroll="myPagingFunction()" infinite-scroll-distance="3"></div> 

ngInfiniteScroll는 요소가 브라우저 창 하단에 접근 myPagingFunction() 언제든지에게 의 바닥을 호출합니다. 사용할 수있는 속성에 대한 자세한 내용은 API 설명서를 참조하십시오. 을 사용하고 데모를보고 작업의 ngInfiniteScroll을 확인하십시오.