[英]Pagination shows all my items only in first page
分頁在第一頁顯示我的所有項目,而其他頁面為空,我正在使用引導程序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.