Question

我正在尝试使用Angular Bootstrap UI的分页为angularjs项目添加分页。我从API检索的数据是用空白内容填充页面......一切都很完美但我现在需要添加一个噩梦的分页。我在下面列出了项目文件。

我一直在使用此Plunker示例作为参考http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview

如果我发出$ 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

Apps.js：

var defaultPage = angular.module('GithubIssues', [
     'ngRoute',
     'DefaultPage'
 ]);

 defaultPage.config(['$routeProvider', function ($routeProvider) {
     $routeProvider.
     when('/default', {
         templateUrl: 'partials/default.html',
         controller: 'DefaultController'
     }).
     when('/issues/:issueId', {
         templateUrl: 'partials/issues.html',
         controller: 'IssuesController'
     }).
     otherwise({
         redirectTo: '/default'
     });
}]);

的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>

UI-Bootstrap分页不改变页面

0 个答案: