我在内存中有大约1000项的数据集，并试图创建一个寻呼机 这个数据集，但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果，这工作得很好，但我需要以某种方式获得页数。
有线索吗?
当前回答
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
其他回答
我在这里提取了相关的部分。这是一个“没有装饰”的表格式寻呼机，所以排序或过滤不包括在内。请根据需要随意更改/添加:
//your data source may be different. the following line is //just for demonstration purposes only var modelData = [{ text: 'Test1' }, { text: 'Test2' }, { text: 'Test3' }]; (function(util) { util.PAGE_SIZE = 10; util.range = function(start, end) { var rng = []; if (!end) { end = start; start = 0; } for (var i = start; i < end; i++) rng.push(i); return rng; }; util.Pager = function(data) { var self = this, _size = util.PAGE_SIZE;; self.current = 0; self.content = function(index) { var start = index * self.size, end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size); return data.slice(start, end); }; self.next = function() { if (!self.canPage('Next')) return; self.current++; }; self.prev = function() { if (!self.canPage('Prev')) return; self.current--; }; self.canPage = function(dir) { if (dir === 'Next') return self.current < self.count - 1; if (dir === 'Prev') return self.current > 0; return false; }; self.list = function() { var start, end; start = self.current < 5 ? 0 : self.current - 5; end = self.count - self.current < 5 ? self.count : self.current + 5; return Util.range(start, end); }; Object.defineProperty(self, 'size', { configurable: false, enumerable: false, get: function() { return _size; }, set: function(val) { _size = val || _size; } }); Object.defineProperty(self, 'count', { configurable: false, enumerable: false, get: function() { return Math.ceil(data.length / self.size); } }); }; })(window.Util = window.Util || {}); (function(ns) { ns.SampleController = function($scope, $window) { $scope.ModelData = modelData; //instantiate pager with array (i.e. our model) $scope.pages = new $window.Util.Pager($scope.ModelData); }; })(window.Controllers = window.Controllers || {}); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <table ng-controller="Controllers.SampleController"> <thead> <tr> <th> Col1 </th> </tr> </thead> <tbody> <tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}"> <td ng-bind-template="{{item.text}}"></td> </tr> </tbody> <tfoot> <tr> <td colspan="4"> <a href="#" ng-click="pages.prev()">«</a> <a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a> <a href="#" ng-click="pages.next()">»</a> </td> </tr> </tfoot> </table>
老问题，但因为我认为我的方法有点不同，不那么复杂，我将分享这一点，希望除了我之外的人觉得它有用。
我发现一个简单而又小的分页解决方案是将一个指令与一个使用相同作用域变量的过滤器结合起来。
为了实现这一点，你在数组上添加过滤器，并像这样添加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-Paging
是个不错的选择
帮助对大型数据集进行分页的指令，同时要求最少的实际分页信息。在这个分页方案中，我们非常依赖于服务器来“过滤”结果。其核心思想是我们只想保存项目的活动“页”——而不是将整个项目列表保存在内存中并在客户端分页。
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>
推荐文章
- 从ng-click获取原始元素
- Angular JS:当我们已经有了具有作用域的指令控制器时，指令的link函数还需要什么?
- Angularjs的ng-model不能在ng-if中工作
- AngularJS禁用了开发机器上的部分缓存
- 如何在AngularJS中动态添加指令?
- 如何在AngularJS中观察路由变化?
- 实例化模块失败[$injector:unpr]未知提供者:$routeProvider
- 在AngularJS中集成jQuery插件的正确方法
- 如何设置一个iframe src属性从一个变量在AngularJS
- 如何在Angular中使用$rootScope来存储变量?
- AngularJS:工厂和服务?
- 父ng-repeat从子ng-repeat的访问索引
- AngularJS使用ng-class切换类
- 如何在Angular.js中配置不同的环境?
- 当使用ng-model时，输入文本框上的Value属性被忽略?
