我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
当前回答
老问题,但因为我认为我的方法有点不同,不那么复杂,我将分享这一点,希望除了我之外的人觉得它有用。
我发现一个简单而又小的分页解决方案是将一个指令与一个使用相同作用域变量的过滤器结合起来。
为了实现这一点,你在数组上添加过滤器,并像这样添加directiv
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>
p_Size和p_Step是作用域变量,可以在作用域中自定义,否则p_Size的默认值为5,p_Step为1。
当分页中的步骤发生变化时,p_Step将被更新,并将触发cust_pagination过滤器进行新的过滤。 cust_pagination过滤器然后根据p_Step值对数组进行切片,如下所示,只返回分页部分中选择的活动记录
var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;
在这个活塞中查看完整的解决方案
其他回答
我最近为用Angular构建的站点实现了分页。你可以签出源代码:https://github.com/angular/builtwith.angularjs.org
我会避免使用过滤器来分离页面。您应该在控制器中将这些项分解为页面。
老问题,但因为我认为我的方法有点不同,不那么复杂,我将分享这一点,希望除了我之外的人觉得它有用。
我发现一个简单而又小的分页解决方案是将一个指令与一个使用相同作用域变量的过滤器结合起来。
为了实现这一点,你在数组上添加过滤器,并像这样添加directiv
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>
p_Size和p_Step是作用域变量,可以在作用域中自定义,否则p_Size的默认值为5,p_Step为1。
当分页中的步骤发生变化时,p_Step将被更新,并将触发cust_pagination过滤器进行新的过滤。 cust_pagination过滤器然后根据p_Step值对数组进行切片,如下所示,只返回分页部分中选择的活动记录
var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;
在这个活塞中查看完整的解决方案
jQuery Mobile angular适配器有一个分页过滤器,你可以基于它。
下面是一个使用它的演示小提琴(添加超过5个项目,它就会变成页面):http://jsfiddle.net/tigbro/Du2DY/
来源如下:https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
我使用这个第三方分页库,它工作得很好。它可以执行本地/远程数据源,并且是非常可配置的。
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]
[auto-hide=""]>
</dir-pagination-controls>
ng-repeat分页
<div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<ul>
<li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- click="currentPage=currentPage+1">
Next
</button>
</div>
<script>
var app=angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.q = '';
$scope.getData = function () {
return $filter('filter')($scope.data, $scope.q)
}
$scope.numberOfPages=function(){
return Math.ceil($scope.getData().length/$scope.pageSize);
}
for (var i=0; i<65; i++) {
$scope.data.push("Item "+i);
}
}]);
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
</script>