如何告诉ui-Bootstrap要分页哪些内容？
我正在使用ui-
Bootstrap，正在尝试使分页正常工作，但是我似乎缺少了一些东西。我已经阅读了文档，并查看了许多插件，以尝试确定他们如何指定要分页的内容，但是我没有运气。
这是我所做的http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview
<section class="main" ng-controller="contentCtrl">
<div ng-repeat="friend in friends">
{{friend.name}}
</div>
<pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<p>
total Items: {{totalItems}}<br />
Items per page: {{itemsPerPage}}<br />
Current Page: {{currentPage}}
</p>
</section>
控制器：
angular.module('plunker', ['ui.bootstrap'])
.controller('contentCtrl', function ($scope) {
$scope.friends = [
{'name':'Jack'},
{'name':'Tim'},
{'name':'Stuart'},
{'name':'Richard'},
{'name':'Tom'},
{'name':'Frank'},
{'name':'Ted'},
{'name':'Michael'},
{'name':'Albert'},
{'name':'Tobby'},
{'name':'Mick'},
{'name':'Nicholas'},
{'name':'Jesse'},
{'name':'Lex'},
{'name':'Robbie'},
{'name':'Jake'},
{'name':'Levi'},
{'name':'Edward'},
{'name':'Neil'},
{'name':'Hugh'},
{'name':'Hugo'},
{'name':'Yanick'},
{'name':'Matt'},
{'name':'Andrew'},
{'name':'Charles'},
{'name':'Oliver'},
{'name':'Robin'},
{'name':'Harry'},
{'name':'James'},
{'name':'Kelvin'},
{'name':'David'},
{'name':'Paul'}
];
$scope.totalItems = 64;
$scope.itemsPerPage = 10
$scope.currentPage = 1;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
});
问题答案：
我可以简单地添加以下参考：
- bootstrap-css
- angular.js
- angular-ui-bootstrap
您的身体可能看起来像这样：
<html ng-app="friends">
<head>
...
</head>
<body>
<h4>Paginated Friends</h4>
<section class="main" ng-controller="contentCtrl">
<div ng-repeat="friend in filteredFriends">
{{friend.name}}
</div>
<pagination total-items="totalItems" items-per-page="itemsPerPage"
ng-model="currentPage" ng-change="pageChanged()"></pagination>
<p>
Total items: {{totalItems}}<br />
Items per page: {{itemsPerPage}}<br />
Current Page: {{currentPage}}
</p>
</section>
</body>
</html>
然后定义以下控制器：
var app = angular.module('plunker', ['ngResource', 'ui.bootstrap']);
app.factory('friendsFactory', function($resource) {
return $resource('friends.json');
});
app.controller('contentCtrl', function ($scope, friendsFactory) {
$scope.friends = friendsFactory.query();
$scope.itemsPerPage = 10
$scope.currentPage = 1;
// $scope.maxSize = 5;
// $scope.bigTotalItems = 175;
// $scope.bigCurrentPage = 1;
$scope.pageCount = function () {
return Math.ceil($scope.friends.length / $scope.itemsPerPage);
};
$scope.friends.$promise.then(function () {
$scope.totalItems = $scope.friends.length;
$scope.$watch('currentPage + itemsPerPage', function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage),
end = begin + $scope.itemsPerPage;
$scope.filteredFriends = $scope.friends.slice(begin, end);
});
});
});
-
使用指南 - 数据报告 - 访客分析 - 地域分布报告告诉我哪些信息 百度统计将根据访客的IP及百度高精度更新的IP地域划分表来判断访客所属地域。地域分布提供了各个地域给您网站带来的流量数据，这些数据可以帮助您合理地分配各地域的推广预算和有针对性地制定业务推广策略： 1.对于已经进行了推广的地域，您可以及时地了解在该地域的推广策略是否给您带来了足够的访客，以及这些访客对您的网站内容是否足够感兴趣，
-
使用指南 - 数据报告 - 访问分析 - 页面点击图告诉我哪些信息 热图（heat map）也称热力图，是以特殊高亮的形式显示用户页面点击位置或用户所在页面位置的图示。借助热图，可以直观地观察到用户的总体访问情况和点击偏好。 百度统计目前提供的页面点击热力图，是基于鼠标点击位置的热力图。能够助您了解访客在网站上的关注点，并根据点击热度进行优化网页设计。 注意：页面点击图和热力图均不能支持监控Fra
-
我正在使用Spring Boot构建一个REST API。我添加了Swagger-ui来处理文档。我在实现客户机身份验证流到swagger时遇到了一个问题，问题是我可以通过基本auth让swagger-ui授权提供的客户机ID（用户名）和客户机机密（密码），但swagger UI似乎没有应用到endpoint调用的结果访问令牌。 确认，我的授权过程；-使用basic auth将base64编码的用
-
使用指南 - 数据报告 - 百度推广 - 搜索推广报告告诉我哪些信息 搜索推广报告提供百度搜索推广中所有关键词给您网站带来的流量情况。您可以通过此报告了解搜索推广中所有关键词的效果，并且有依据地优化各个关键词，从而不断提升百度搜索推广的投资回报率。 搜索推广流量可以分别按计划、单元、创意、搜索词、推广url查看，也可以选择授权账户，查看其他授权账户的推广流量。 报告下方是对应的具体关键词：
-
使用指南 - 数据报告 - 优化分析 - 升降榜报告能告诉我哪些信息 升降榜从来源类型、搜索引擎、搜索词、外部链接等各个维度分析导致网站流量变化的主要因素，用于分析任意两天之间流量变化的原因，评估网站推广效果或查找变化原因。
-
科学论文的R“stats”引用问题使我想知道，当在学术论文中使用R时，我将如何列举我应该引用的所有R包。我如何获得我加载并需要引用的包列表？