Question

我在阅读Angular缩放时的最佳做法是限制ng-repeat中的可视区域。我在这种情况下通过limitTo完成了（我相信）（并且，这是一个真正的限制...没有无限滚动或任何东西）：

<li ng-repeat="lister in videos | filter:query | orderBy:orderProp | limitTo:20"
                 class="video_link">
   <p class="background_435F2C">
        <a id="{{lister.id}}" href="#/videos/{{lister.id}}">{{lister.name}}</a>
   </p>
</li>

但是，当我通过带有20,000条简单记录的JSON文件引入测试数据时，相关查询过滤器的响应时间（仅标准的Angular查询，没有任何花哨）会下降。输入输入时会出现明显的延迟。

有什么想法？是过滤像这样的最佳实践的大型JSON文件，还是应该在服务器端完成，转到/搜索页面？

谢谢！

Answer 1

在像你这样的情况下，在控制器中的JS代码中进行过滤，而不是在HTML中进行过滤（因为如果在HTML中最终运行两次）。

// inject $filter into controller
.controller('MyCtrl', ['$scope', '$filter', function ($scope,$filter) {
...

var filterFilter = $filter('filter');
var orderByFilter = $filter('orderBy');
var limitToFilter = $filter('limitTo');

var tmp = filterFilter($scope.videos , $scope.query);
tmp = orderByFilter(tmp, $scope.orderProp);
$scope.videosPreFiltered = limitToFilter(tmp, 20);

然后在html中

<li ng-repeat="lister in videosPreFiltered class="video_link">
   <p class="background_435F2C">
        <a id="{{lister.id}}" href="#/videos/{{lister.id}}">{{lister.name}}</a>
   </p>
</li>

角度大的json文件

1 个答案: