Pagination pada daftar menggunakan ng-repeat

Saya mencoba menambahkan halaman ke daftar saya. Saya mengikuti tutorial AngularJS, tutorial tentang smartphone dan saya mencoba menampilkan hanya sejumlah objek. Ini file html saya:

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

Saya telah menambahkan tag pilih dengan beberapa nilai untuk membatasi jumlah item yang akan ditampilkan. Yang saya inginkan sekarang adalah menambahkan pagination untuk menampilkan 5, 10, dll.

Saya memiliki pengontrol yang berfungsi dengan ini:

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

Dan saya juga memiliki modul untuk mengambil data dari file json.

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

Jika Anda tidak memiliki terlalu banyak data, Anda dapat melakukan pagination dengan hanya menyimpan semua data di browser dan memfilter apa yang terlihat pada waktu tertentu.

Berikut contoh pagination sederhana: http://jsfiddle.net/2ZzZB/56/

Contoh itu ada di daftar biola pada angular.js github wiki, yang seharusnya membantu: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

EDIT: http://jsfiddle.net/2ZzZB/16/ ke http://jsfiddle.net/2ZzZB/56/ (tidak akan menampilkan "1 / 4.5" jika ada 45 hasil)

Saya baru saja membuat JSFiddle yang menunjukkan pagination + search + order pada setiap kolom menggunakan Build with Twitter Bootstrap code: http://jsfiddle.net/SAWsA/11/

Saya telah membangun sebuah modul yang membuat pagination di memori sangat sederhana.

Hal ini memungkinkan Anda untuk paginate dengan hanya mengganti ng-repeatdengan dir-paginate, menentukan setiap halaman sebagai filter pipa, dan kemudian menjatuhkan kontrol mana pun Anda seperti dalam bentuk satu direktif,<dir-pagination-controls>

Untuk mengambil contoh asli yang diminta oleh Tomarto, akan terlihat seperti ini:

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

Tidak perlu kode pagination khusus di controller Anda. Semuanya ditangani secara internal oleh modul.

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

Sumber: dirPagination of GitHub

Saya tahu utas ini sudah tua sekarang tetapi saya menjawabnya untuk menjaga hal-hal yang sedikit diperbarui.

Dengan Angular 1.4 dan di atas, Anda dapat langsung menggunakan filter limitTo yang selain menerima limitparameter juga menerima beginparameter.

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

Jadi sekarang Anda mungkin tidak perlu menggunakan perpustakaan pihak ketiga apa pun untuk mencapai sesuatu seperti pagination. Saya telah membuat biola untuk mengilustrasikan hal yang sama.

Lihat arahan ini: https://github.com/samu/angular-table

Ini mengotomatiskan penyortiran dan pagination banyak dan memberi Anda cukup kebebasan untuk menyesuaikan tabel / daftar Anda seperti yang Anda inginkan.

Berikut ini adalah kode demo tempat pagination + Filtering dengan AngularJS:

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>