如何限制链接到我的 angular ui-select 的包含 10,000 个对象的数组？

Question

我有一个包含 10,000 个对象的数组，每次单击 select 时浏览器都会崩溃。无论如何限制 ui-select 一次只能在屏幕上显示 10 个？此外，我使用的库是 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 1

查看 limitTo 例如...

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

JSFiddle Link - 演示

根据您的更新，修改您的 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>

Plunkr

Answer 3

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

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

如何限制链接到我的 angular ui-select 的包含 10,000 个对象的数组？

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

html

javascript

angularjs

angular-ui

angularjs-directive