如何在AngularJS中进行分页?

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>

2017-01-26 09:47:12

我更新了斯科特的情况。NET的plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview，这样它就可以使用angular、angular-ui和bootstrap的新版本。

控制器

var todos = angular.module('todos', ['ui.bootstrap']);

todos.controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.itemsPerPage = 30;
  $scope.currentPage = 4;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:'todo '+i, done:false});
    }
  };

  $scope.figureOutTodosToDisplay = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  };

  $scope.makeTodos(); 
  $scope.figureOutTodosToDisplay();

  $scope.pageChanged = function() {
    $scope.figureOutTodosToDisplay();
  };

});

引导UI组件

 <pagination boundary-links="true" 
    max-size="3" 
    items-per-page="itemsPerPage"
    total-items="todos.length" 
    ng-model="currentPage" 
    ng-change="pageChanged()"></pagination>

2014-07-24 18:50:13

下面的代码将有助于在后端提供自定义分页角repeat。

你的数据会在

$scope.myticketIssuesData = [];
$scope.allticketIssuesData = [];

2021-12-08 19:35:22

我曾经多次使用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/

2014-05-10 07:24:44

前面的消息基本上推荐了如何自己构建分页。如果你和我一样，更喜欢一个完整的指令，我刚刚发现了一个很棒的指令，叫做ngTable。它支持排序、过滤和分页。

这是一个非常干净的解决方案，你所需要的是:

   <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>

在控制器中:

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;

        var start = (params.page() - 1) * params.count();
        var end = params.page() * params.count();

        $defer.resolve(orderedData.slice( start, end));
    }
});

GitHub链接:https://github.com/esvit/ng-table/

2014-02-18 11:10:28

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

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>

2016-01-21 13:29:43

如何在AngularJS中进行分页?

推荐文章

最新文章

标签