Question

上的问题示例

Pagination在第一页显示我的所有项目，而其他页面是空的，我使用bootstrap 3，我的想法是每页显示6个项目，对于每一行3项，如果有人可以，我将不胜感激帮助我。

控制器：

var controllerPagination = angular.module('controllerPagination', ['ui.bootstrap']);


// Pagination events
controllerPagination.controller('PageEvents', ['$scope', function ($scope) {


        // pagination controls
         $scope.filteredTodos = []
    $scope.currentPage = 1;
    $scope.entryLimit = 6; // itemEvents per page
    $scope.noOfPages = Math.ceil($scope.totalItems / $scope.entryLimit);
    $scope.itemEvents = [
    {"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
    ,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
    ,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
    ,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
    ,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
    ,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}
    ,{"title": "bla bla bla","date":"10-12-2017" ,"content": "......", "lien":"#/"}

    ];

    $scope.totalItems = $scope.itemEvents.length;
    $scope.chunkedItems = [] ;

    while ($scope.itemEvents.length > 0)
    $scope.chunkedItems.push($scope.itemEvents.splice(0, 3));



  $scope.$watch('currentPage + entryLimit', function() {
    var begin = (($scope.currentPage - 1) * $scope.entryLimit)
    , end = begin + $scope.entryLimit;

    $scope.filteredTodos = $scope.chunkedItems.slice(begin, end);
  });

}]);``

<body ng-app="controllerPagination">

     <section id="" >
        <div class="container" ng-controller="PageEvents">
            <div class="row"  ng-repeat="itemEvents in filteredTodos ">

                    <div class="col-lg-4 col-md-4 col-sm-4 " ng-repeat="event in itemEvents">
                        <div class="portfolio-item">

                                <h5 >{{event.title}}</h5>
                                <div class="" >
                                <div class="preview btn btn-success ">{{event.date}}</div>
                                <p>
                                    {{event.content}}
                                </p>
                                <a class="preview"  href="{{event.lien}}" >
                                    <i class="fa fa-microphone fa-5x"></i>
                                        read more
                                </a>
                                </div>
                        </div>
                    </div>

            </div>
        <pagination ng-model="currentPage" max-size="noOfPages" total-items="totalItems" items-per-page="entryLimit"  boundary-links="true"></pagination>
        </div>

    </section>
  </body>

Answer 1

entryLimit实际上是每3个项目，因此要在每页显示6个项目，您需要将其设置为2，而不是6。

这是一个更新的plunker：http://plnkr.co/edit/FfYHdjlcgCivESdfZUUF?p=preview

分页仅在第一页显示我的所有项目

1 个答案: