Question

我使用AngularJS作为前端，并且开发了一个简单的分页。我似乎无法弄清楚如何显示Displaying Reviews 1-5之类的内容，然后当他们转到下一页时，它将显示Displaying Reviews 6-8等，等等。

angular.module('cuApp')

    .directive('cuProductReviews',
        [
            'ProductReviewService', '$window', function (productReviewService, $window) {
                return {
                    restrict: 'AE',
                    scope: {
                        productId: '@'
                    },
                    template:'<div class="reviewDetails_{{productId}} productReviewList d-flex flex-column hidden" id="ReviewList">' +
                            '<div class="row">' +
                                '<div class="d-flex w-100 align-items-center reviews_greyBackground">' +
                                    '<h4 class="my-4 ml-4">Displaying Reviews 1-{{model.reviews.length}}</h4>' +
                                    '<select id="reviewFilterSelect" class="ml-auto mr-3 h-100 px-3 pr-4 reviewSelectBox" ng-click="reviewFilter()">' +
                                        '<option value="0">TOP REVIEW</option>' +
                                        '<option value="1">MOST RECENT</option>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<div class="row my-5"" ng-repeat="review in model.reviews | startFrom:currentPage*pageSize | limitTo:pageSize">' +
                                '<div class="col mt-3">' +
                                    '<div class="d-flex w-100 align-items-center">' +
                                        '<span>' +
                                            '<i class="fas fa-star fc-primary fa-lg" ng-repeat="n in range(1,review.score)"></i>' +
                                            '<i class="star fas fa-star" ng-repeat="n in range(1,5-review.score)"></i>' +
                                        '</span>' +
                                        '<h2 class="my-0 ml-3">{{review.title}}</h2>' +
                                        '<h3 class="ml-auto my-0">{{review.modifiedDate | date: "MMM, y"}}</h3>' +
                                    '</div>' +
                                    '<hr class="my-3"/>' +
                                    '<p class="my-4">{{review.review}}</p>' +
                                    '<div class="d-flex w-100 align-items-center">' +
                                        '<button class="btn btn-circle btn-outline btn-sm btn-brand" ng-if="!review.userHelpful" ng-click="isHelpful(review.id)"><i class="fas fa-thumbs-up fa-lg m-0"></i> Helpful?</button>' +
                                        '<button class="btn btn-circle btn-sm btn-brand-green" ng-if="review.userHelpful"><i class="far fa-check fa-lg m-0"></i> Thank You!</button>' +
                                        '<p class="ml-4 my-0"><span class="fc-primary h3 mr-2">{{review.helpful}}</span> Cardholder\'s found this helpful</p>' +
                                    '</div>' +
                                '</div>' +
                            '</div>' +
                            '<div class="row mt-4 mt-auto">' +
                                '<div class="col d-flex w-100 justify-content-center">' +
                                    '<button class="btn btn-primary"><i class="fas fa-stars"></i> RATE THIS PRODUCT</button>' +
                                '</div>' +
                            '</div>' +
                            '<div class="row mb-5">' +
                                '<div class="col">' +
                                    '<div class="d-flex mt-5 w-100 py-4 px-4 align-items-center reviews_greyBackground">' +
                                        '<p class="my-0 font-weight-bold">DISPLAYING REVIEWS 1-{{model.reviews.length}} <span class="mx-2">|</span> <a ng-click="goToTop(this)" href="">Back to the top</a> <span class="mx-2">|</span> <a href="" ng-click="showDetails($event)">Close review</a></p>' +
                                        '<div class="d-flex ml-auto">' +
                                            '<button class="review-paginationButton" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"><p class="my-0"><i class="fal fa-arrow-left fc-primary"></i> Previous</p></button>' +
                                            '<p class="mx-2 my-0"> | </p>' +
                                            '<button class="review-paginationButton" ng-disabled="currentPage >= model.reviews.length/pageSize - 1" ng-click="currentPage=currentPage+1"><p class="my-0">Next <i class="fal fa-arrow-right fc-primary"></i></p></button>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>' +
                        '</div>' +
                    '</div>',
                    link: function (scope) {

                        scope.currentPage = 0;
                        scope.pageSize = 5;

                        scope.numberOfPages = function() {
                            return Math.ceil(scope.model.reviews.length / scope.pageSize);
                        };

                    }
                };
            }
        ]);

我似乎无法确定如何获得想要的结果，所以现在我只显示1-Total Reviews。我想尝试在没有任何外部条件的情况下解决此问题，这是一条指令，它将在我的整个Web应用程序中放置无数次时间。

Answer 1

编辑：

由于我不确定您的数据来自何处，因此这就是我以“通用”方式实现此功能的方式：

var paginatedData = [/*...*/];
var totalCount = n;
var currentPage = 1;
var pageSize = 5;

var pageStart = pageSize * (currentPage - 1) + 1;
var pageEnd = paginatedData.length + (pageSize * (currentPage - 1));

var results = (!paginatedData.length)? '0' : pageStart+'-'+pageEnd+'/'+totalCount;

如果您对如何解释有任何疑问，请告诉我。

旧答案：

这就是我在表中实现此功能的方式。我认为我已经很好地适应了您的变量。请注意，我将默认的currentPage修改为1，因为我认为第一页应该始终是数字1，而不是0：

scope.currentPage = 1;
scope.pageSize = 5;


scope.pageStart = scope.pageSize * (scope.currentPage - 1) + 1;
scope.pageEnd = scope.model.reviews.length + (scope.pageSize * (scope.currentPage - 1));

var results = (!scope.model.reviews.length)? '0' : scope.pageStart+'-'+scope.pageEnd;

var HTMLresults = '<h4 class="my-4 ml-4">Displaying Reviews: ' + results + '</h4>';

我不知道您是否有任何变量是能够像我一样显示pageStart-pageEnd/total的总数。

如何显示结果在每个页面上的显示方式？

1 个答案: