使用ng-repeat对列表进行分页
使用ng-repeat对列表进行分页
提问于 2012-07-20 22:17:28
我正在尝试添加页面到我的列表中。我遵循了AngularJS教程，这是一个关于智能手机的教程，我试图只显示一定数量的对象。下面是我的html文件：
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span2'>
Search: <input ng-model='searchBar'>
Sort by:
<select ng-model='orderProp'>
<option value='name'>Alphabetical</option>
<option value='age'>Newest</option>
</select>
You selected the phones to be ordered by: {{orderProp}}
</div>
<div class='span10'>
<select ng-model='limit'>
<option value='5'>Show 5 per page</option>
<option value='10'>Show 10 per page</option>
<option value='15'>Show 15 per page</option>
<option value='20'>Show 20 per page</option>
</select>
<ul class='phones'>
<li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>
<a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
<a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>我添加了一个带有一些值的select标记，以限制将显示的项目的数量。我现在想要的是添加分页来显示下一个5，10，等等。
我有一个控制器可以处理这个：
function PhoneListCtrl($scope, Phone){
$scope.phones = Phone.query();
$scope.orderProp = 'age';
$scope.limit = 5;
}我还有一个模块，用来从json文件中检索数据。
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
});
});回答 4
Stack Overflow用户
回答已采纳
发布于 2012-07-20 23:07:58
如果你没有太多的数据，你绝对可以通过在浏览器中存储所有数据并过滤在特定时间可见的内容来进行分页。
下面是一个简单的分页示例：http://jsfiddle.net/2ZzZB/56/
这个例子在angular.js github wiki上的小提琴列表中，这应该是有帮助的：https://github.com/angular/angular.js/wiki/JsFiddle-Examples
编辑：http://jsfiddle.net/2ZzZB/16/ to http://jsfiddle.net/2ZzZB/56/ (如果有45个结果，则不会显示"1/4.5“)
Stack Overflow用户
发布于 2014-07-10 23:30:13
我已经构建了一个模块，它使内存中的分页变得非常简单。
它允许您通过以下方式进行分页:只需将ng-repeat替换为dir-paginate，将每页的项目指定为管道筛选器，然后以<dir-pagination-controls>指令的形式将控件放在您喜欢的任何位置
以Tomarto询问的原始示例为例，它将如下所示：
<ul class='phones'>
<li class='thumbnail' dir-paginate='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit | itemsPerPage: limit'>
<a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
<a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
<dir-pagination-controls></dir-pagination-controls>在您的控制器中不需要任何特殊的分页代码。这一切都是由模块内部处理的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11581209
复制相关文章
相似问题