Как я могу показать, как результаты отображаются на каждой странице?

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. Я хотел бы попытаться решить эту проблему без каких-либо внешних воздействий, это директива, которая будет размещаться бесчисленное количество времени в моем веб-приложении.

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, как я.