AngularJS Pagination TypeError:无法读取属性' slice'未定义的

时间:2016-01-29 15:17:18

标签: angularjs pagination angular-ui-bootstrap slice

我收到一条错误消息" TypeError:无法读取属性' slice'未定义"在尝试使用Bootstrap分页时。我相信在尝试将.slice()方法应用于' items'时会发生范围问题。在ng-repeat中。我已将代码包含在我认为问题正在发生的地方。我一直在使用这篇文章AngularJS pagination and Cannot read property 'slice' of undefined作为解决我遇到的问题的指南。

Controllers.js:

defaultPage = angular.module('DefaultPage', ['ui.bootstrap']);

defaultPage.controller('DefaultController', ['$scope', '$http', function ($scope, $http) {
    $scope.data = {};
    $scope.totalItems = $scope.ctrl.info.length;
            //console.log($scope.ctrl.info.length)
            $scope.itemsPerPage = 25;
            $scope.currentPage = 1;
            $scope.max = "3";

            $scope.pageCount = function () {
                var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
                //console.log(begin)
                var end = begin + $scope.itemsPerPage;
                //console.log(end)

                $scope.totalItems = $scope.items.slice(begin, end);
                console.log($scope.items)

            };
}]);

HTML:

<div class="main" ng-controller="DefaultController as ctrl">
    <div class="search">
        <h1 class="shadow"></h1>
        <div class="searchbox">
            <i class="fa fa-search"></i>

            <input ng-model="query" placeholder="Search Issue Title or Case #" autofocus>
        </div>
    </div>

    <ul class="channellist">
        <li ng-repeat="items in ctrl.info | filter: query | filter: issue" class="channel cf">

            <a ng-href="#/issues/{{ctrl.info.indexOf(items)}}">
                <img ng-src="{{items.user.avatar_url}}" alt="channel logo for {{items.user.avatar_url}}" />

                <div class="info">

                    <h2 class="userName">{{items.user.login}}</h2>
                    <h4 class="case">case: #{{items.number}}</h4>
                    <h4 class="case">issue status: {{items.state}}</h4>
                    <div class="main">
                        <h3 class="title">{{items.title}}</h3>
                        <p class="body">{{items.body}}</p>
                    </div>
                    <div class="label_info">
                        <ul>
                            <li class="mark">Created:</li>
                            <li class="mark"> {{items.created_at}}
                            </li>
                            <li class="mark">Updated:</li>
                            <li class="mark"> {{items.updated_at}}</li>
                        </ul>
                    </div>
                </div>
            </a>
        </li>
        <uib-pagination boundary-links="true" max-size="max" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

您无法对不存在的内容进行切片,请先尝试定义项目。