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

Question

Example of my issue on Plunker 我关于Plunker的问题的示例

Pagination shows all my items in the first page, while other pages are empty,I'm using bootstrap 3, my idea is to show 6 items per page, and for every row 3 items, I would be grateful if someone can help me. 分页在第一页显示我的所有项目，而其他页面为空，我正在使用引导程序3，我的想法是每页显示6个项目，每行3个项目，如果有人可以帮助我，我将不胜感激。

Controller: 控制器：

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 is actually per 3 items, so to show 6 items per page you need to set that to 2, not 6. entryLimit实际上是每3个项目，因此要显示每页6个项目，您需要将其设置为2，而不是6。

Here's an updated plunker: http://plnkr.co/edit/FfYHdjlcgCivESdfZUUF?p=preview 这是更新的插件： http ://plnkr.co/edit/FfYHdjlcgCivESdfZUUF?p=preview

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-03-01 23:19:28

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-03-01 23:19:28

解决方案1
1 已采纳 2017-03-01 23:19:28