Проблема с разбивкой по страницам с AngularJS

Question

У меня проблема с реализацией разбиения на страницы в моем приложении AngularJS, я бы хотел реализовать предыдущую и следующую кнопку, но она не работает.

Я думаю, что это не работает с моей директивой «пагинацией», я использую новый фильтр «пагинацию» в моем шаблоне, и это проблема ....

Мой шаблон:

<div ng-controller="ListCustomer"> 
    <table class="table table-striped table-hover table-bordered"> 
     <thead> 
      <tr> 
       <td> 
        Prénom 
        <button class="btn" ng-click="sortCustomer='firstname'; reverse=!reverse">sort</button> 
       </td> 
       <td> 
        nom 
        <button class="btn" ng-click="sortCustomer='lastname'; reverse=!reverse">sort</button> 
       </td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="customer in customers | filter:searchCustomer | orderBy:sortCustomer:reverse | 
    pagination: currentPage * numberOfCustomersPerPage | limitTo: numberOfCustomersPerPage"> 
        <td>{{customer.firstname}}</td> 
        <td>{{customer.lastname}}</td> 
      </tr> 
     </tbody> 
    </table> 
    <button type="button" class="btn btn-primary" ng-disabled="currentPage == 1" 
    ng-click="currentPage=currentPage-1"> &lt; PREV</button> 
    <span>Page {{currentPage}} of {{ numberOfPages() }}</span> 
    <button type="button" class="btn btn-primary" 
    ng-disabled="currentPage >= customers.length/numberOfCustomersPerPage" 
    ng-click="currentPage = currentPage+1">NEXT &gt;</button> 
    </div> 

Мой код расслоение плотной:

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

    BottomApp.controller('ListCustomer', ['$scope','$http', 
     function($scope, $http){ 
      $http.get('/api/customer').success (function(data){ 
       $scope.customers = data; 
       $scope.currentPage = 1; 
       $scope.numberOfCustomersPerPage = 1; 
       $scope.numberOfPages = function(){ 
        return Math.ceil($scope.customers.length/$scope.numberOfCustomersPerPage); 
       }; 
      }); 
     }] 
    ); 

    angular.module('BottomApp').filter('pagination', function(){ 
    return function(input, start){ 
     start = +start; 
     return input.slice(start); 
    }; 
    }); 

И моя ошибка:

Error: Expected ngRepeat in form of '_item_ in _collection_' but got 'customer in customers | filter:searchCustomer | orderBy:sortCustomer:reverse | 
    pagination: currentPage * numberOfCustomersPerPage | limitTo: numberOfCustomersPerPage'. 
     at Error (native) 
     at http://localhost:3000/scripts/vendors/angular.min.js:147:417 
     at i (http://localhost:3000/scripts/vendors/angular.min.js:44:302) 
     at e (http://localhost:3000/scripts/vendors/angular.min.js:39:458) 
     at e (http://localhost:3000/scripts/vendors/angular.min.js:40:103) 
     at e (http://localhost:3000/scripts/vendors/angular.min.js:40:103) 
     at i (http://localhost:3000/scripts/vendors/angular.min.js:44:242) 
     at e (http://localhost:3000/scripts/vendors/angular.min.js:40:86) 
     at e (http://localhost:3000/scripts/vendors/angular.min.js:40:103) 
     at e (http://localhost:3000/scripts/vendors/angular.min.js:40:103) <!-- ngRepeat: customer in customers | filter:searchCustomer | orderBy:sortCustomer:reverse | 
    pagination: currentPage * numberOfCustomersPerPage | limitTo: numberOfCustomersPerPage --> 

Edit # 1

TypeError: Cannot read property 'slice' of undefined 
    at Object.<anonymous> (http://localhost:3000/scripts/app.js:19:15) 
    at e (http://localhost:3000/scripts/vendors/angular.min.js:69:468) 
    at Ja.| (http://localhost:3000/scripts/vendors/angular.min.js:130:308) 
    at http://localhost:3000/scripts/vendors/angular.min.js:69:112 
    at Ja.| (http://localhost:3000/scripts/vendors/angular.min.js:130:313) 
    at http://localhost:3000/scripts/vendors/angular.min.js:69:112 
    at Object.e.$eval (http://localhost:3000/scripts/vendors/angular.min.js:89:39) 
    at Object.<anonymous> (http://localhost:3000/scripts/vendors/angular.min.js:148:75) 
    at Object.e.$digest (http://localhost:3000/scripts/vendors/angular.min.js:87:13) 
    at Object.e.$apply (http://localhost:3000/scripts/vendors/angular.min.js:89:198) 

Answer 1

Я думаю, вы должны удалить пробелы из ваших фильтров вызовов. Ошибка, похоже, предполагает, что ng-repeat не может проанализировать атрибут.

Попробуйте использовать это:

customer in customers | filter:searchCustomer | orderBy:sortCustomer:reverse | 
pagination:currentPage*numberOfCustomersPerPage | limitTo:numberOfCustomersPerPage