AngularJS 'ng-filter' is very slow on array of ~1000 elements

Question

I have a simple search filter set up for a list of itemnames in AngularJS.

My list looks like this:

var uniqu         


        

Answer 1

I created a fiddle to simulate (part of) the code you are showing.

On my computer, which is fast but not super fast, that runs acceptably well. It's a little slow, but it's filtering an overly long list that has two-way binding with the checkboxes. Every time you type a letter, the entire list must be scanned and items removed (or added).

I think your best bet for solving this is to add some sort of simple pagination, as shown in this StackOverflow answer.

Here I've modified my example to include pagination. You will probably want to invest in a better solution than just Next / Previous, but this shows you how the result can be extremely fast if you aren't showing everything all at once. It still searches the whole list, but the rendered list is much more limited.

The additions:

Add paging info to the scope in the controller:

$scope.currentPage = 0;
$scope.pageSize = 20;
$scope.numberOfPages = function () {
    return Math.ceil($scope.items.length / $scope.pageSize);
}

Create a new filter to start from a specific page:

app.filter('startFrom', function () {
    return function (input, start, pageSize) {
        start = +start; //parse to int
        pageSize = +pageSize;
        while (start > input.length) {
            start -= pageSize;
        }
        if (start < 0) {
            start = 0;
        }
        return input.slice(start);
    };
});

Add filters to the view to limit the list:

Add pagination buttons to the page:

    

        Previous {{ currentPage+1 }}/{{ numberOfPages() }}
        Next