javascript - utilizar - Paginación en una lista usando ng-repeat

ng-repeat group by

Question

Estoy tratando de agregar páginas a mi lista. Seguí el tutorial de AngularJS, el de teléfonos inteligentes y estoy tratando de mostrar solo cierta cantidad de objetos. Aquí está mi archivo 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>

Agregué una etiqueta de selección con algunos valores para limitar el número de elementos que se mostrarán. Lo que quiero ahora es agregar la paginación para mostrar los próximos 5, 10, etc.

Tengo un controlador que funciona con esto:

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

Y también tengo un módulo para recuperar los datos de los archivos json.

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

Answer 1

Acabo de crear un JSFiddle que muestre la paginación + búsqueda + orden en cada columna usando Build with Twitter Bootstrap code: http://jsfiddle.net/SAWsA/11/

Answer 2

Aquí hay un código de demostración donde hay paginación + Filtrado con 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>

Answer 3

Construí un módulo que hace que la paginación en memoria sea increíblemente simple.

Le permite paginar simplemente reemplazando ng-repeat con dir-paginate , especificando los elementos por página como un filtro canalizado, y luego soltando los controles donde quiera en forma de una sola directiva, <dir-pagination-controls>

Para tomar el ejemplo original que pidió Tomarto, se vería así:

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

No es necesario ningún código de paginación especial en su controlador. Todo es manejado internamente por el módulo.

Demostración: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

Fuente: dirPagination de GitHub

Answer 4

Consulte esta directiva: https://github.com/samu/angular-table

Automatiza mucho la clasificación y la paginación y te da la libertad suficiente para personalizar tu tabla / lista como quieras.

Answer 5

Sé que este hilo es viejo ahora, pero lo estoy respondiendo para mantener las cosas un poco actualizadas.

Con Angular 1.4 y superior, puede usar directamente el filtro limitTo que, además de aceptar el parámetro de limit , también acepta un parámetro de begin .

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

Por lo tanto, es posible que ahora no necesite usar ninguna biblioteca de terceros para lograr algo así como la paginación. He creado un fiddle para ilustrar lo mismo.

Answer 6

Si no tiene demasiados datos, definitivamente puede hacer paginación simplemente almacenando todos los datos en el navegador y filtrando lo que está visible en un momento determinado.

Aquí hay un ejemplo de paginación simple: http://jsfiddle.net/2ZzZB/56/

Ese ejemplo estaba en la lista de violines en la wiki angular.js github, que debería ser útil: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

EDITAR: http://jsfiddle.net/2ZzZB/16/ a http://jsfiddle.net/2ZzZB/56/ (no mostrará "1 / 4.5" si hay 45 resultados)