我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
当前回答
从Angular 1.4开始,limitTo过滤器也接受第二个可选参数begin
从文档中可以看出:
{{limitTo_expression | limitTo: limit: begin}} 开始 (可选) 字符串|数字 开始限制的索引。作为一个负索引,begin表示从输入的末尾开始的偏移量。默认值为0。
所以你不需要创建一个新的指令,这个参数可以用来设置分页的偏移量
ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage"
其他回答
我希望我能发表评论,但我不得不在这里留下这个:
苏格兰狗。NET的答案和user2176745对后续版本的重做都很棒,但它们都遗漏了我的AngularJS (v1.3.15)版本的一些问题:
i在$scope.makeTodos中没有定义。
因此,用这个函数替换可以修复它在最近的angular版本中的问题。
$scope.makeTodos = function() {
var i;
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:'todo '+i, done:false});
}
};
我刚刚做了一个JSFiddle,显示分页+搜索+排序每列使用btford代码:http://jsfiddle.net/SAWsA/11/
我最近为用Angular构建的站点实现了分页。你可以签出源代码:https://github.com/angular/builtwith.angularjs.org
我会避免使用过滤器来分离页面。您应该在控制器中将这些项分解为页面。
Angular UI引导-分页指令
查看UI Bootstrap的分页指令。我最终使用了它,而不是在这里发布的,因为它有足够的功能满足我目前的使用,并有一个完整的测试规范。
View
<!-- table here -->
<pagination
ng-model="currentPage"
total-items="todos.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<!-- items/page select here if you like -->
控制器
todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});
我做了一个工作活塞供参考。
遗留版本:
View
<!-- table here -->
<div data-pagination="" data-num-pages="numPages()"
data-current-page="currentPage" data-max-size="maxSize"
data-boundary-links="true"></div>
<!-- items/page select here if you like -->
控制器
todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.numPages = function () {
return Math.ceil($scope.todos.length / $scope.numPerPage);
};
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});
我做了一个工作活塞供参考。
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>