AngularJS的分頁問題

我遇到了一個問題在我的AngularJS應用中實現分頁，我想實現一個prev和next按鈕，但它不起作用。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>

我的js代碼：

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

編輯＃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)

來源

2014-09-11 tonymx227

我認爲你必須從你的過濾器調用刪除空格。該錯誤似乎表明，ng-repeat無法解析該屬性。

嘗試使用此：

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

來源

2014-09-11 10:58:39

好了，現在看來，我有一個新的錯誤...查看上面的編輯＃1。 – tonymx227 2014-09-11 11:50:20

@ tonymx227我正在使用反向自定義過濾器並獲取相同的錯誤：TypeError：無法讀取未定義的屬性'slice'。你解決了嗎？ – monical 2014-10-12 14:12:29

@ tonymx227錯誤提示您的過濾器的輸入參數未定義。那麼可能您的客戶名單中的一位客戶未定義？ – 2014-10-13 06:35:40

AngularJS的分頁問題

回答

相關問題