我如何告诉用户界面，引导什么样的内容进行分页？ [英] How do I tell ui-Bootstrap what content to paginate?
本文介绍了我如何告诉用户界面，引导什么样的内容进行分页？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的用户界面，引导，我试图让分页工作，但我似乎失去了一些东西。我已阅读文档，看着一堆plunkers的尝试，并找出它们是如何规定进行分页哪些内容，但我有没有运气。
下面是我做了什么<一个href=\"http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=$p$pview\">http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=$p$pview
＆lt;节类=主NG控制器=contentCtrl＆GT;
＆LT; DIV NG重复=朋友的朋友＆GT;
{{friend.name}}
＆LT; / DIV＆GT;
＆LT;分页总项=TOTALITEMS项目的单页=itemsPerPageNG模型=当前页NG变化=pageChanged（）＆GT;＆LT; /分页＆GT; ＆所述p为H.;
总笔数：{{TOTALITEMS}}＆LT; BR /＆GT;
每页项目：{{itemsPerPage}}＆LT; BR /＆GT;
当前位置：{{当前页}}
＆所述; / P＆GT;
＆LT; /节＆gt;
控制器：
angular.module（'plunker'，['ui.bootstrap']）
.controller（'contentCtrl'，函数（$范围）{ $ scope.friends = [
{'名'：'杰克'}，
{'名'：'添'}，
{'名'：'斯图尔特}，
{'名'：'理查德'}，
{'名'：'汤姆'}，
{'名'：'弗兰克'}，
{'名'：'泰德'}，
{'名'：'迈克尔'}，
{'名'：伟业}，
{'名'：'Tobby}，
{'名'：'米克}，
{'名'：'尼古拉'}，
{'名'：'杰西}，
{'名'：'莱克斯}，
{'名'：'罗比}，
{'名'：'杰克'}，
{'名'：'利'}，
{'名'：'爱德华'}，
{'名'：'尼尔'}，
{'名'：'休'}，
{'名'：'胡戈'}，
{'名'：'Yanick}，
{'名'：'亚光'}，
{'名'：'安德鲁'}，
{'名'：'查尔斯'}，
{'名'：'奥利弗'}，
{'名'：'罗宾'}，
{'名'：'哈利'}，
{'名'：'詹姆斯'}，
{'名'：'开'}，
{'名'：'大卫'}，
{'名'：'保罗'}
]; $ scope.totalItems = 64;
$ scope.itemsPerPage = 10
$ scope.currentPage = 1; $ scope.setPage =功能（帮您做生意）{
$ scope.currentPage =帮您做生意;
}; $ scope.pageChanged =功能（）{
的console.log（'页面改为：+ $ scope.currentPage）;
}; $ scope.maxSize = 5;
$ scope.bigTotalItems = 175;
$ scope.bigCurrentPage = 1;
}）;
解决方案
我可以简单地添加下列引用：
- 引导，CSS
- angular.js
- 角UI的引导
您的身体可能是这样的：
＆LT; HTML NG-应用=朋友＆GT;
＆LT; HEAD＆GT;
...
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; H4＆GT;分页朋友＆LT; / H4＆GT;
＆lt;节类=主NG控制器=contentCtrl＆GT;
＆LT; DIV NG重复=朋友filteredFriends＆GT;
{{friend.name}}
＆LT; / DIV＆GT;
＆LT;分页总项=TOTALITEMS项目的单页=itemsPerPage
NG-模式=当前页NG变化=pageChanged（）＆GT;＆LT; /分页＆GT;
＆所述p为H.;
总笔数：{{TOTALITEMS}}＆LT; BR /＆GT;
每页项目：{{itemsPerPage}}＆LT; BR /＆GT;
当前位置：{{当前页}}
＆所述; / P＆GT;
＆LT; /节＆gt;
＆LT; /身体GT;
＆LT; / HTML＆GT;
然后定义以下控制器：
VAR应用= angular.module（'plunker'，['ngResource'，'ui.bootstrap']）;app.factory（'friendsFactory'，函数（$资源）{
返回$资源（'friends.json'）;
}）;app.controller（'contentCtrl'，函数（$范围，friendsFactory）{
$ scope.friends = friendsFactory.query（）; $ scope.itemsPerPage = 10
$ scope.currentPage = 1; // $ scope.maxSize = 5;
// $ scope.bigTotalItems = 175;
// $ scope.bigCurrentPage = 1; $ scope.pageCount =功能（）{
返回Math.ceil（$ scope.friends.length / $ scope.itemsPerPage）;
}; $ scope.friends。$ promise.then（函数（）{
$ scope.totalItems = $ scope.friends.length;
$范围。$表（当前页+ itemsPerPage'，函数（）{
VAR开始=（（$ scope.currentPage - 1）* $ scope.itemsPerPage）
最终=开始+ $ scope.itemsPerPage; $ scope.filteredFriends = $ scope.friends.slice（开始，结束）;
}）;
}）;
}）;
I am using ui-Bootstrap and I am trying to get the pagination working but I seem to be missing something. I have read the documentation and looked at a bunch of plunkers to try and work out how they are specifying which content to paginate but I am having no luck.
Here is what I have done 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>
Controller:
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;
});
解决方案
I could simply add the following references:
- bootstrap-css
- angular.js
- angular-ui-bootstrap
Your body could look like this:
<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>
Then define the following controller:
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);
});
});
});
这篇关于我如何告诉用户界面，引导什么样的内容进行分页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
