Paginierung einer Liste mit ng-repeat

Ich versuche, Seiten zu meiner Liste hinzuzufügen. Ich habe das AngularJS-Tutorial über Smartphones befolgt und versuche, nur eine bestimmte Anzahl von Objekten anzuzeigen. Hier ist meine HTML-Datei:

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

Ich habe ein Auswahl-Tag mit einigen Werten hinzugefügt, um die Anzahl der angezeigten Elemente zu begrenzen. Was ich jetzt möchte, ist das Hinzufügen der Paginierung, um die nächsten 5, 10 usw. anzuzeigen.

Ich habe einen Controller, der damit arbeitet:

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

Außerdem habe ich ein Modul, um die Daten aus den JSON-Dateien abzurufen.

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

Wenn Sie nicht zu viele Daten haben, können Sie auf jeden Fall eine Paginierung durchführen, indem Sie einfach alle Daten im Browser speichern und filtern, was zu einem bestimmten Zeitpunkt sichtbar ist.

Hier ist ein einfaches Paginierungsbeispiel: http://jsfiddle.net/2ZzZB/56/

Dieses Beispiel befand sich auf der Liste der Geigen im Github-Wiki von angle.js, was hilfreich sein sollte: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

BEARBEITEN: http://jsfiddle.net/2ZzZB/16/ bis http://jsfiddle.net/2ZzZB/56/ (zeigt nicht "1 / 4.5" an, wenn 45 Ergebnisse vorliegen)

Ich habe gerade eine JSFiddle erstellt, die Paginierung + Suche + Reihenfolge nach in jeder Spalte mit Build with Twitter Bootstrap- Code anzeigt : http://jsfiddle.net/SAWsA/11/

Ich habe ein Modul erstellt, das die In-Memory-Paginierung unglaublich einfach macht.

Es ermöglicht Ihnen, Paginieren durch einfaches Austauschen ng-repeatmit dir-paginate, die Einzelteile pro Seite als verrohrt Filter spezifizieren, und fallen dann die Steuerelemente , wo man sich wie in Form einer einzigen Richtlinie,<dir-pagination-controls>

Um das ursprüngliche Beispiel von Tomarto zu nehmen, würde es so aussehen:

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

In Ihrem Controller ist kein spezieller Paginierungscode erforderlich. Alles wird intern vom Modul erledigt.

Demo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

Quelle: dirPagination von GitHub

Ich weiß, dass dieser Thread jetzt alt ist, aber ich beantworte ihn, um die Dinge ein bisschen auf dem neuesten Stand zu halten.

Mit Angular 1.4 und höher können Sie den Filter limitTo direkt verwenden , der neben dem Akzeptieren des limitParameters auch einen beginParameter akzeptiert .

Verwendung: {{ limitTo_expression | limitTo : limit : begin}}

Jetzt müssen Sie möglicherweise keine Bibliothek eines Drittanbieters verwenden, um eine Paginierung zu erzielen. Ich habe eine Geige geschaffen , um dasselbe zu veranschaulichen.

Überprüfen Sie diese Anweisung: https://github.com/samu/angular-table

Es automatisiert das Sortieren und Paginieren erheblich und gibt Ihnen genügend Freiheit, Ihre Tabelle / Liste nach Ihren Wünschen anzupassen.

Hier ist ein Demo-Code, in dem Paginierung + Filterung mit AngularJS erfolgt:

https://codepen.io/lamjaguar/pen/yOrVym

JS:

var app=angular.module('myApp', []);

// alternate - https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
// alternate - http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      // needed for the pagination calc
      // https://docs.angularjs.org/api/ng/filter/filter
      return $filter('filter')($scope.data, $scope.q)
     /* 
       // manual filter
       // if u used this, remove the filter from html, remove above line and replace data with getData()

        var arr = [];
        if($scope.q == '') {
            arr = $scope.data;
        } else {
            for(var ea in $scope.data) {
                if($scope.data[ea].indexOf($scope.q) > -1) {
                    arr.push( $scope.data[ea] );
                }
            }
        }
        return arr;
       */
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }

    for (var i=0; i<65; i++) {
        $scope.data.push("Item "+i);
    }
  // A watch to bring us back to the 
  // first pagination after each 
  // filtering
$scope.$watch('q', function(newValue,oldValue){             if(oldValue!=newValue){
      $scope.currentPage = 0;
  }
},true);
}]);

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

HTML:

<div ng-app="myApp" ng-controller="MyCtrl">
  <input ng-model="q" id="search" class="form-control" placeholder="Filter text">
  <select ng-model="pageSize" id="pageSize" class="form-control">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
     </select>
  <ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
      {{item}}
    </li>
  </ul>
  <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Previous
    </button> {{currentPage+1}}/{{numberOfPages()}}
  <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
</div>