角度大的json文件

Question

I've read that best practice when scaling Angular is to limit the viewable area in an ng-repeat. I've done that (I believe) in this case by limitTo (and, this is a true limitTo...no infinite scrolling or anything yet):

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

However, when I bring in test data via a JSON file with 20,000 simple records, response time on the associated query filter (just the standard Angular query, nothing fancy) declines. There's noticeable lag when typing in the input.

Any thoughts? Is filtering a large JSON file like this best practice, or is it really something that should be done server-side, going to a /search page?

Thanks!

Answer 1

In cases like yours, do the filtering in JS code in controller, not in the HTML (because it eventually runs twice if in 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);

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