我正在尝试使用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>