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

我使用

AngularJS

作为前端，并开发了一个简单的分页。我似乎不知道如何显示类似于

显示评论1-5

的内容，然后当他们转到下一页时，它会显示

显示评论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);
                        };

                    }
                };
            }
        ]);

angular.module（'cuApp'）
.指令（'cuProductReviews'，
[
'ProductReviewService'，'$window'，函数（ProductReviewService，$window）{
返回{
限制：“AE”，
范围：{
productId:“@”
},
模板：“”+
'' +
'' +
'显示评论1-{model.Reviews.length}+
'' +
“顶级评论”+
“最近的”+
'' +
'' +
'' +
'=model.reviews.length/pageSize-1“ng click=“currentPage=currentPage+1”>
下一步+
'' +
'' +
'' +
'' +
'',
链接：功能（范围）{
scope.currentPage=0；
scope.pageSize=5；
scope.numberOfPages=函数（）{
返回Math.ceil（scope.model.reviews.length/scope.pageSize）；
};
}
};
}
]);

我似乎无法确定如何达到我想要的结果，所以现在我只显示1-Total评论。我想尝试在没有任何外部因素的情况下解决这个问题，这是一个将在我的web应用程序中花费无数时间的指令。

编辑：

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

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

---

旧答案：

这就是我在表中实现此功能的方式。我认为我对其进行了很好的调整，以适合您的变量。请注意，我将您的默认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>';

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='显示评论：'+results+''；

---

我不知道你是否在任何变量中有能够像我一样显示

pageStart pageEnd/total

的总计数。

我做了

scope.model.reviews.length

对不起，我可能没有很好地解释你的数据，我将不得不修改我的答案。

scope.model.reviews.length

是存储的数据总数或tota当前页面中的l个元素？不是

scope.model.reviews

此时显示的元素？它

ng在model.reviews

中重复

查看，每页最多查看5次。
scope.model.reviews.length
是产品的查看总数。不仅仅是显示的内容我编辑了我的答案.我希望这对你来说没问题，你可以根据你的代码调整它。如果你有问题，请告诉我
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>';