簡體   English   中英

分頁僅在第一頁顯示我的所有項目

[英]Pagination shows all my items only in first page

我關於Plunker的問題的示例

分頁在第一頁顯示我的所有項目,而其他頁面為空,我正在使用引導程序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>

entryLimit實際上是每3個項目,因此要顯示每頁6個項目,您需要將其設置為2,而不是6。

這是更新的插件: http ://plnkr.co/edit/FfYHdjlcgCivESdfZUUF?p=preview

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM