Angularjs UI引导分页不更改页面_Angularjs_Json_Xmlhttprequest_Angular Ui Pagination

Angularjs UI引导分页不更改页面

angularjs json

Angularjs UI引导分页不更改页面,angularjs,json,xmlhttprequest,angular-ui-pagination,Angularjs,Json,Xmlhttprequest,Angular Ui Pagination,我正在尝试使用angularjs probject的AngularBootstrap UI分页功能向其添加分页功能。我从API检索的数据正在用空白内容填充页面。。。一切都很完美，但我现在需要添加一个分页，这是一个噩梦。我已将项目文件包括在下面我一直在使用这个Plunker示例作为参考如果我发出$http请求来检索外部数据，是否仍然需要使用for循环欢迎并感谢您的帮助。谢谢 Controller.js： defaultPage = angular.module('DefaultPage',

我正在尝试使用angularjs probject的AngularBootstrap UI分页功能向其添加分页功能。我从API检索的数据正在用空白内容填充页面。。。一切都很完美，但我现在需要添加一个分页，这是一个噩梦。我已将项目文件包括在下面

我一直在使用这个Plunker示例作为参考

如果我发出$http请求来检索外部数据，是否仍然需要使用for循环

欢迎并感谢您的帮助。谢谢

Controller.js：

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

defaultPage.controller('DefaultController', ['$scope', '$http', function ($scope, $http) {

var url = 'https://api.github.com/repos/npm/npm/issues'

    $scope.data = {};

    $http.get(url, {
        headers: {
            'Content-type': 'application/json'
        }
    }).success(function (data) {
        $scope.ctrl.info = data;   
        $scope.itemsPerPage = 25;
        $scope.currentPage = 1;

        $scope.makeTodos = function() {
            $scope.GithubIssues = [];
            for (var i = 1; i <= $scope.ctrl.info.length; i++) {
                $scope.GithubIssues.push({done:false});
            }
        };

        $scope.figureOutTodosToDisplay = function() {
            var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
            var end = begin + $scope.itemsPerPage;
            $scope.ctrl.info = $scope.GithubIssues.slice(begin, end);
            console.log($scope.GithubIssues)
        };

        $scope.makeTodos();
        $scope.figureOutTodosToDisplay();

        $scope.pageChanged = function() {
            $scope.figureOutTodosToDisplay();
        };
    });
}]); //defaultPage ctrl end

index.html：

<body ng-app="GithubIssues">

    <div class="main" ng-view></div>

</body>
<script src="js/app.js"></script>
<script src="controllers/controllers.js"></script>
<script src="filters/filters.js"></script>

</html>

DefaultPage.html：

<div class="main" ng-controller="DefaultController as ctrl">

    <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 class="pagination-sm" boundary-link-numbers="true" rotate="false" items-per-page="itemsPerPage" total-items="ctrl.info.length" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
    </ul>

</div>

当我将pageChanged从$http之外移除时，您应该将pageChanged函数置于

$http

成功函数作用域之外，我收到一条错误消息$scope.pageChanged undefined@阿洛内坦

<div class="main" ng-controller="DefaultController as ctrl">

    <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 class="pagination-sm" boundary-link-numbers="true" rotate="false" items-per-page="itemsPerPage" total-items="ctrl.info.length" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
    </ul>

</div>