我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。

我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。

有线索吗?


当前回答

我使用这个第三方分页库,它工作得很好。它可以执行本地/远程数据源,并且是非常可配置的。

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>

其他回答

我使用这个第三方分页库,它工作得很好。它可以执行本地/远程数据源,并且是非常可配置的。

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>

我希望我能发表评论,但我不得不在这里留下这个:

苏格兰狗。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/

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>

我曾经多次使用Angular实现分页,对于一些我觉得可以简化的东西来说,这总是有点麻烦。我使用了这里和其他地方介绍的一些想法来创建一个分页模块,使分页变得简单如下:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

// then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

就是这样。它具有以下特点:

在控制器中不需要自定义代码来将集合项绑定到分页链接。 你不需要使用表格或gridview -你可以对任何你可以重复的东西进行分页! 委托给ng-repeat,所以你可以使用任何可以在ng-repeat中有效使用的表达式,包括过滤、排序等。 跨控制器工作——分页控制指令不需要知道调用paginate指令的上下文的任何信息。

演示:http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

对于那些正在寻找“即插即用”解决方案的人来说,我想你会发现这篇文章很有用。

Code

代码可以在GitHub上找到,包括一组很好的测试:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

如果你感兴趣,我还写了一篇关于模块设计的小文章:http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/