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}
});
});
javascript
angularjs
paginate
Tomarto
quelle
quelle
Antworten:
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)
quelle
if (input?)
vor der Rückkehr eine Bedingung hinzuinput.slice(start)
, danke Andy!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/
quelle
Ich habe ein Modul erstellt, das die In-Memory-Paginierung unglaublich einfach macht.
Es ermöglicht Ihnen, Paginieren durch einfaches Austauschen
ng-repeat
mitdir-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:
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
quelle
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
limit
Parameters auch einenbegin
Parameter 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.
quelle
Ü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.
quelle
$index
und mein Array keine inkrementellen Werte enthält<td at-sortable at-attribute="index">{{sortedAndPaginatedList.indexOf(item) + 1}}</td>
aber ich weiß nicht, ob es der richtige Weg istHier ist ein Demo-Code, in dem Paginierung + Filterung mit AngularJS erfolgt:
https://codepen.io/lamjaguar/pen/yOrVym
JS:
HTML:
quelle