javascript - ng-repeat 位于另一个 ng-repeat 内导致分页问题

Question

我在另一个 ng-repeat 中有 ng-repeat，并且两者都有分页数据。 主要的工作正常，但 ng-repeat 内的分页数据并不总是工作。它会抛出控制台错误。

错误:[$interpolate:interr] 无法插值:第 {{curPage + 1}} 页，共 {{ numberOfPages() }}类型错误:无法读取未定义的属性“长度”。

<div ng-repeat="item in items | hbStartFrom: savedcurPage * savedpageSize | limitTo: savedpageSize">
                <span>{{ item.id }}</span>
                <span ng-click="showResults();">Show results</span>
                <ul style="display:none">
                <li ng-repeat="subitem in item.newitems | hbStartFrom: curPage * pageSize | limitTo: pageSize">
                {{ subitem.name}}
                </li>
                </ul>
                <div class="pagination pagination-centered" ng-show="subiitm.newitems.length > 5">
                    <ul>
                        <li>
                            <button type="button" ng-disabled="curPage == 0" ng-click="curPage=curPage-1">&lt; PREV</button>
                        </li>
                        <li><span>Page {{curPage + 1}} of {{ numberOfPages() }}</span></li>
                        <li>
                            <button type="button" ng-disabled="curPage >= subiitm.newitems.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT &gt;</button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pagination pagination-centered " ng-show="item.length > 10 ">
            <ul>
                <li>
                    <button type="button" ng-disabled="savedcurPage == 0" ng-click="savedcurPage=savedcurPage-1">&lt; PREV</button>
                </li>
                <li><span>Page {{savedcurPage + 1}} of {{ numberOfSavedPages() }}</span></li>
                <li>
                    <button type="button" ng-disabled="savedcurPage >= item.length/savedpageSize - 1" ng-click="savedcurPage = savedcurPage+1">NEXT &gt;</button>
                </li>
            </ul>
        </div>




            //pagination for first loop
            $scope.savedcurPage = 0;
            $scope.savedpageSize = 10;
            $scope.numberOfSavedPages = function() {
                return Math.ceil( $scope.items.length / $scope.savedpageSize);
            };

            // pagination for second loop
            $scope.curPage = 0;
            $scope.pageSize = 5;
            $scope.numberOfPages = function() {
                return Math.ceil($scope.subitem.newitems.length / $scope.pageSize);
            };

            // pagination filter
angular.module('samplemodule').filter('hbStartFrom', function()
{
    return function(input, start)
    {
        start = +start;
        return input.slice(start);
    };
});

Answer 1

您应该将该项目作为 numberOfPages 方法或其索引的参数传递。

像这样重新定义你的方法:

$scope.numberOfPages = function(item) {
    return Math.ceil(item.newitems.length / $scope.pageSize);
};

在你看来，称之为传递项目。

{{ numberOfSavedPages(item) }}

或者，使用 $index

$scope.numberOfPages = function(index) {
    return Math.ceil($scope.items[index].newitems.length / $scope.pageSize);
};

/// view
{{ numberOfSavedPages($index) }}