AngularJS 'ng-filtre" est très lent sur le tableau de ~1000 éléments

Le principal problème avec le filtre approche est que, lors de chaque modification du dom est manipulé, donc ce n'est pas le filtre qui est lent mais les conséquences. Une alternative est d'utiliser quelque chose comme:

ng-show="([item] | filter:searchFilter).length > 0"

sur la répétition de l'élément.

De prêt du code de @excès de Zèle, vous pouvez utiliser les éléments suivants pour comparer le comportement:

• filtre: http://jsbin.com/fuwadanu/1/
• ng-show: http://jsbin.com/xajehulo/1/

Mise à jour: Angulaire v1.2 a la track by de la syntaxe. Ce qui contribue aussi à de tels problèmes. Fourni les éléments ont une certaine attribut unique, on peut utiliser:

ng-repeat="item in items | filter:searchFilter track by item.id"

Où item.id doit être unique dans tous les éléments. Avec track by seulement ceux des dom-éléments seront supprimés qui ne sont plus dans la liste finale, les autres seront rappeler. Alors que sans track by l'ensemble de la liste est redessiné à chaque fois. En bref: beaucoup moins de manipulation du dom = plus rapide redessiner.

• piste par: http://jsbin.com/dufasego/1/

J'ai créé un violon à simuler (en partie) du code de vous montrer.

Sur mon ordinateur, qui est rapide, mais pas super rapide, qui fonctionne de façon acceptable. C'est un peu lent, mais c'est le filtrage d'une trop longue liste qui a les deux sens de la liaison avec les cases à cocher. Chaque fois que vous tapez une lettre, l'ensemble de la liste doivent être scannés et les éléments supprimés (ou ajouté).

Je pense que votre meilleur pari pour la résolution de ce est pour ajouter une sorte de simple pagination, comme indiqué dans cette StackOverflow réponse.

Ici, j'ai modifié mon exemple pour inclure la pagination. Vous aurez probablement envie d'investir dans une meilleure solution que de simplement Suivant /Précédent, mais cela vous montre comment le résultat peut être très rapide si vous ne présentez pas de tout à la fois. Il se cherche encore l'ensemble de la liste, mais la liste est beaucoup plus limitée.

Les ajouts:

Ajouter la pagination info à la portée dans le contrôleur:

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

Créer un nouveau filtre pour démarrer à partir d'une page spécifique:

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);
    };
});

Ajouter des filtres à la vue de limiter la liste:

<li ng-repeat="value in items | filter:searchFilter |
        startFrom:currentPage*pageSize:pageSize | limitTo:pageSize">

Ajouter des boutons de pagination à la page:

    <div>
        <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button> {{ currentPage+1 }}/{{ numberOfPages() }}
        <button ng-disabled="currentPage >= items.length/pageSize - 1" ng-click="currentPage=currentPage+1">Next</button>
    </div>

Vous pouvez également limiter le nombre d'éléments qui seront affichés à l'aide d'un "limitTo" du filtre. Cela vous permet de toujours avoir un grand nombre d'articles dans votre modèle que vous êtes de filtrage, mais il ne sera pas aussi lent parce que vous n'êtes pas en essayant de montrer TOUS les éléments dans le DOM.

Ici est une version modifiée de jsbin basé sur les réponses précédentes, mais avec le limitTo filtre appliqué:

http://jsbin.com/IhOcaKo/1