ng-repeat를 사용한 목록의 페이지 매김

내 목록에 페이지를 추가하려고합니다. 나는 스마트 폰에 관한 AngularJS 튜토리얼을 따랐으며 특정 수의 객체 만 표시하려고합니다. 내 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>

표시 될 항목 수를 제한하기 위해 일부 값이있는 select 태그를 추가했습니다. 내가 지금 원하는 것은 페이지 매김을 추가하여 다음 5, 10 등을 표시하는 것입니다.

이 작업을 수행하는 컨트롤러가 있습니다.

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

또한 json 파일에서 데이터를 검색하기위한 모듈이 있습니다.

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

데이터가 너무 많지 않으면 브라우저에 모든 데이터를 저장하고 특정 시간에 표시되는 내용을 필터링하여 페이지 매김을 확실히 할 수 있습니다.

간단한 페이지 매김 예는 다음과 같습니다. http://jsfiddle.net/2ZzZB/56/

이 예제는 angular.js github wiki의 바이올린 목록에 있습니다. https://github.com/angular/angular.js/wiki/JsFiddle-Examples

편집 : http://jsfiddle.net/2ZzZB/16/ ~ http://jsfiddle.net/2ZzZB/56/ (45 개의 결과가있는 경우 "1 / 4.5"가 표시되지 않음)

방금 Twitter Bootstrap 코드로 빌드를 사용하여 각 열에서 페이지 매김 + 검색 + 순서를 보여주는 JSFiddle을 만들었습니다 : http://jsfiddle.net/SAWsA/11/

메모리 내 페이지 매김을 매우 간단하게 만드는 모듈을 만들었습니다.

그것은 단순히 대체하여 쪽수를 매기다을 수행 할 수 있습니다 ng-repeat와 함께 dir-paginate, 파이프 필터로 페이지 당 항목을 지정하고 어디를 하나의 지침의 형태로 같은 컨트롤을 삭제<dir-pagination-controls>

Tomarto가 요청한 원래 예를 들어 보면 다음과 같습니다.

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

컨트롤러에 특별한 페이지 매김 코드가 필요하지 않습니다. 모두 모듈에 의해 내부적으로 처리됩니다.

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

출처 : GitHub의 dirPagination

이 스레드가 오래되었다는 것을 알고 있지만 업데이트를 유지하기 위해 응답하고 있습니다.

Angular 1.4 이상 에서는 매개 변수를 수락하는 것 외에도 매개 변수를 허용하는 limitTo 필터를 직접 사용할 수 있습니다 .limitbegin

용법: {{ limitTo_expression | limitTo : limit : begin}}

따라서 이제 페이지 매김과 같은 것을 달성하기 위해 타사 라이브러리를 사용할 필요가 없습니다. 나는 같은 것을 설명하기 바이올린 을 .

이 지시어를 확인하십시오 : https://github.com/samu/angular-table

정렬 및 페이지 매김을 많이 자동화하고 원하는대로 테이블 / 목록을 사용자 정의 할 수있는 충분한 자유를 제공합니다.

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>