Question

我正在尝试使用此tutorial在我的角应用中实现分页服务，最终目标是每页显示10个链接。链接通常包含标题，描述和图像。但是，有些链接不包含图像，这就是问题发生的地方。

以下是CodePen示例：http://codepen.io/anon/pen/rLbZyY

分页服务：

function PagerService() {
    // service definition
    var service = {};

    service.GetPager = GetPager;

    return service;

    // service implementation
    function GetPager(totalItems, currentPage, pageSize) {
        // default to first page
        currentPage = currentPage || 1;

        // default page size is 10
        pageSize = pageSize || 10;

        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

页面设置功能：

function setPage(page) {
    if (page < 1 || page > vm.pager.totalPages) {
            return;
    }
    // get pager object from service
    vm.pager = PagerService.GetPager(vm.dummyItems.length, page);

    // get current page of items
    vm.items = vm.dummyItems.slice(vm.pager.startIndex, vm.pager.endIndex + 1);
}

正如您在CodePen中看到的，当链接不包含图像时，它根本不显示任何内容。但是，在Web上，它会显示上一个链接的图像。例如，链接No.17没有图像，它显示链接No.7的图像而不是什么，而我更喜欢不显示任何内容。

我已尝试将$scope.$apply();添加到function setPage(page)的底部，但它没有做到这一点。现在我为临时解决方案添加ng-if，并询问为什么会出现此问题以及是否有其他解决方案。

问题非常复杂，请告诉我是否应该添加任何其他代码或说明以使问题更清楚。

Angular JS分页服务没有正确更新ng-repeat值

0 个答案: