如何限制一个包含 10,000 个对象的数组，这些对象链接到我的角度 ui-select？答案

【问题标题】：How to limit an array with 10,000 objects thats linked to my angular ui-select?如何限制一个包含 10,000 个对象的数组，这些对象链接到我的角度 ui-select？
【发布时间】：2016-01-10 11:06:50
【问题描述】：

我有一个包含 10,000 个对象的数组，每次单击选择时都会导致浏览器崩溃。有没有办法限制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>

【问题讨论】：

第一件事，你不应该将 10,000 个对象绑定到你的 ui-select，它可能会挂起你的浏览器..当用户输入输入时，你应该懒惰地使用这些选项
这不是一个有角度的 ui 引导问题。

标签： javascript html angularjs angularjs-directive angular-ui

【解决方案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>

【讨论】：

感谢您的回复。我正在使用 ui-select repeat 并尝试了上面的示例，但是当我单击选择时它仍然会使浏览器崩溃。我将添加我的代码。
@Rethabile 我试图根据您的情况更新我的答案。可以看看吗？
我不熟悉 angular ui-select，但它没有实现类似无限滚动分页或类似的东西吗？
@Juri 不确定，我正在查看 ui-select 文档，但看不到任何明显的东西

【解决方案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>

Detailed Answer

Plunkr

【讨论】：

【解决方案3】：

仅在 html 中使用 limitTo:itemsPerPage。使用 $timeout 函数动态更改 limitTo 值。调用addMoreChoices()，从那里加载更多选项。

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

【讨论】：