ng-repeat在另一个ng-repeat中导致分页问题

时间:2014-08-25 10:43:23

标签: javascript angularjs

我在另一个ng-repeat内部进行了ng-repeat,并且两者都有分页数据。             主要工作正常,但ng-repeat中的分页数据总是不起作用。它会引发控制台错误。

错误:[$ interpolate:interr]无法插值:{{numberOfPages()}}的页面{{curPage + 1}} TypeError:无法读取属性' length'未定义的。

<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);
    };
});

1 个答案:

答案 0 :(得分: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) }}