Mise à jour de la pagination dans AngularJS après filtrage

J'ai déjà la pagination de mise en œuvre.
Maintenant, je veux que la pagination à être mis à jour après le filtrage de mes résultats.

La forme:

<input type="text" data-ng-model="search.name" data-ng-change="filter()"/>

La liste:

<li data-ng-repeat="data in filtered = (list | filter:search) | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}}</li>

La pagination:

<pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize"></pagination>

Le contrôleur:

$scope.filter = function() {
    window.setTimeout(function() { //wait for 'filtered' to be changed
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
        $scope.setPage = function(pageNo) {
            $scope.currentPage = pageNo;
        };
    }, 10);
};

Mon problème est, la pagination est juste mis à jour après avoir cliqué sur un numéro de page ou après de saisir le caractère suivant dans le champ de saisie. C'est donc la mise à jour d'une étape à la fin.

MODIFIER: j'ai ajouté la source à jsFiddle: http://jsfiddle.net/eqCWL/2/

InformationsquelleAutor StinsonMaster | 2013-04-22

3

Utilisation $timeout au lieu de window.setTimeOut. $timeout est enroulé correctement à travailler de manière cohérente dans Angulaire.

InformationsquelleAutor abject_error
36

@abject_error 's réponse à l'aide de $timeout fonctionne. J'ai édité votre violon avec sa suggestion, et fait de cette jsFiddle

Mise en garde

Je pense que la solution est révélateur d'un problème plus important dans la forme d'une condition de concurrence!

jsFiddle à l'aide de filterFilter et $watch

et que le violon est le moyen de contourner cela pour des reals.

Et voici l'explication

Votre condition de course est entre la gestion de la modification de search et la disponibilité de $scope.filtered.

Je pense que les coupables à éliminer afin de résoudre cette situation de compétition sont:
```
ng-model="search" ng-change="filter()"
```
et
```
ng-repeat="data in filtered = (list | filter:search)......."
```
À l'aide de ng-change à feu off "filter()" pour faire le calcul de noOfPages, mais aussi en fonction d'un changement dans la recherche afin de créer filtered. Le faisant de cette façon, assure la liste filtrée ne peut pas être prêt à temps pour calculer le nombre de pages, et c'est pourquoi clopinant "filter()" de 10 ms avec un délai d'attente vous donne l'illusion d'un programme de travail.

Ce que vous avez besoin est une façon de "voir" search pour les modifications, puis filtrer la liste dans un endroit où vous avez accès à la fois à la création $scope.filtered et le calcul de $scope.noOfPages. Tous dans l'ordre, sans qu'une course.

Angulaire a de cette façon! Il est possible d'utiliser le filter filtre à votre contrôleur de fonction très mal nommée: filterFilter. Check this out dans le Les filtres Guide d'Utilisation de filtres dans les contrôleurs et les services

L'injecter dans le contrôleur.
```
function pageCtrl($scope, filterFilter) {
    //...
}
```
L'utiliser dans un $watch fonction, documentée dans le les étendues de docs
```
$scope.$watch('search', function(term) {  
    //Create filtered 
    $scope.filtered = filterFilter($scope.list, term);  

    //Then calculate noOfPages
    $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);  
})
```
Modifier le modèle afin de refléter notre nouvelle façon. Pas plus dans les DOM filtre, ou ng-change
```
<input type="text" ng-model="search" placeholder="Search"/>
```
et
```
<li ng-repeat="data in filtered | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
    {{data.name}}
</li>
```
- Cela ressemble à une meilleure solution, mais si je change le ng-model="rechercher" ng-model"de recherche.le nom de" suivre <input type="text" ng-model="recherche.le nom" placeholder="Rechercher"/> il semble casser. Quelle en est la cause. Je demande cela parce que je voudrais être en mesure de filtrer sur plusieurs colonnes
- Changer le montre l'expression de search.name ainsi. Vous pourriez envisager si $watchCollection est quelque chose à utiliser dans votre cas. Vous permet de regarder les propriétés d'un objet.
- J'avais déjà compris le troisième paramètre de l' $fonction de veille, mais je pense que le $watchCollection est encore mieux. Merci pour cela.
- J'ai mon propre pagination directive comme je mettre en place de la pagination et de la recherche à travers plusieurs pages. Dans ce cas, comment puis-je ajouter de la recherche de la logique de mon directive ng-repeat désigne le contrôleur. Si je dois ajouter cette logique de la manette, puis j'ai copier coller le code pour l'ensemble de mes pages. Toutes les suggestions?
- Je suis dans le même bateau... j'aime cette solution, mais je ne suis pas sûr de savoir comment mettre en œuvre au sein de mon application sans copier/coller le code dans chaque contrôleur
- Vous pouvez vérifier ceci: github.com/michaelbromley/angularUtils/tree/master/src/...
- Les gars, <la pagination> tag ne s'affiche pas sur ma page. même la pensée de l'interface utilisateur, le bootstrap est injecté. Peut enyone me donner un indice?
- Désolé, je ne comprends pas d'où le filtre filterFilter est défini. Quelqu'un peut-il expliquer cela?
InformationsquelleAutor nackjicholson
4

Vous pouvez simplement utiliser cette directive à la place:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

Il propose la pagination avec un filtre tout en gardant le code beau et propre.

Bravo à michaelbromley pour le grand code.
- Cassé mon watchers.
InformationsquelleAutor wolfdawn

Utilisation angulaire $scope.$watch

$scope.$watch('search', function(term) {
    $scope.filter = function() {
        $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
    }
});

Source ; http://jsfiddle.net/eqCWL/2/

Demo ; http://jsfiddle.net/eqCWL/192/

InformationsquelleAutor sinHoot

Vous devez vous connecter pour publier un commentaire.

jsFiddle à l'aide de filterFilter et $watch