La Pagination sur une liste à l'aide de ng-repeat

Question

Je suis en train d'ajouter des pages à ma liste. J'ai suivi le tutoriel AngularJS, l'un sur les smartphones et j'essaie de n'afficher que certains nombre d'objets. Voici mon fichier html:

  <div class='container-fluid'>
    <div class='row-fluid'>
        <div class='span2'>
            Search: <input ng-model='searchBar'>
            Sort by: 
            <select ng-model='orderProp'>
                <option value='name'>Alphabetical</option>
                <option value='age'>Newest</option>
            </select>
            You selected the phones to be ordered by: {{orderProp}}
        </div>

        <div class='span10'>
          <select ng-model='limit'>
            <option value='5'>Show 5 per page</option>
            <option value='10'>Show 10 per page</option>
            <option value='15'>Show 15 per page</option>
            <option value='20'>Show 20 per page</option>
          </select>
          <ul class='phones'>
            <li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>
                <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
                <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
                <p>{{phone.snippet}}</p>
            </li>
          </ul>
        </div>
    </div>
  </div>

J'ai ajouté une balise select avec certaines valeurs afin de limiter le nombre d'éléments qui seront affichés. Ce que je veux maintenant, c'est d'ajouter la pagination pour afficher les 5, 10, etc.

J'ai un contrôleur qui fonctionne avec ceci:

function PhoneListCtrl($scope, Phone){
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
    $scope.limit = 5;
}

Et aussi, j'ai un module afin de récupérer les données à partir des fichiers json.

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
        return $resource('phones/:phoneId.json', {}, {
            query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
        });
    });

J'espère que vous pourrez m'aider. Merci à l'avance.

Answer 1

Si vous n'avez pas trop de données, vous pouvez certainement faire de la pagination par juste le stockage de toutes les données dans le navigateur et le filtrage de ce qui est visible à un moment donné.

Voici un simple pagination exemple: http://jsfiddle.net/2ZzZB/56/

Cet exemple a été sur la liste des violons sur le angular.js github wiki, ce qui devrait vous être utile: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

EDIT: http://jsfiddle.net/2ZzZB/16/ pour http://jsfiddle.net/2ZzZB/56/ (ne pas s'afficher "1/4.5" si il y a 45 résultats)

Answer 2

Je viens de faire un JSFiddle qui montrent la pagination + recherche + commande par sur chaque colonne à l'aide Construire avec Twitter Bootstrapcode: http://jsfiddle.net/SAWsA/11/

Answer 3

J'ai construit un module de mémoire de pagination incroyablement simple.

Il vous permet de paginer simplement en remplaçant ng-repeat avec dir-paginate, en précisant les éléments par page comme une canalisation d'eau du filtre, et puis la suppression de l'contrôles où vous le souhaitez dans la forme d'une directive unique, <dir-pagination-controls>

Pour prendre l'exemple d'origine demandé par Tomarto, il devrait ressembler à ceci:

<ul class='phones'>
    <li class='thumbnail' dir-paginate='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit | itemsPerPage: limit'>
            <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
            <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
            <p>{{phone.snippet}}</p>
    </li>
</ul>

<dir-pagination-controls></dir-pagination-controls>

Il n'est pas nécessaire pour toute spéciale pagination de code dans votre contrôleur. Tout est géré en interne par le module.

Démo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

Source: dirPagination de GitHub

Answer 4

Découvrez la présente directive: https://github.com/samu/angular-table

Il permet d'automatiser le tri et la pagination beaucoup et vous donne assez de liberté pour personnaliser votre tableau/liste de ce que vous voulez.