如何限制与我的角度ui-选择链接的10,000个对象的数组？

Question

我有一个包含10,000个对象的数组，每次单击select，它都会使浏览器崩溃。是否有限制ui-select一次只能在屏幕上显示10？此外，我使用的库是ui-选择。

 <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 1

看看limitTo例如..。

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

JSFiddle链路 -演示

根据您的更新，修改您的repeat如下

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

Answer 2

她是我的解决方案，让你补充卷轴上的新项目。也适用于可能太大的筛选列表。

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

详细答复

普朗克

Answer 3

在html中只使用limitTo:itemsPerPage。使用limitTo函数动态更改$timeout值。从要加载更多选项的位置调用addMoreChoices()。

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