Question

我在AngularJS应用程序中实现了一个问题，我想实现一个prev和next按钮，但它不起作用。

我认为它不适用于我的指令“分页”，我在我的模板中使用了一个新的过滤器“分页”，这就是问题....

我的模板：

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

Answer 1

我认为您必须从过滤器调用中删除空格。该错误似乎表明ng-repeat无法解析该属性。

尝试使用它：

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

AngularJS的分页问题

1 个答案: