Question

我正在尝试将页面添加到我的列表中。我按照AngularJS教程，一个关于智能手机的教程，我试图只显示一定数量的对象。这是我的html文件：

  <div class='container-fluid'>
    <div class='row-fluid'>
        <div class='span2'>
            Search: <input ng-model='searchBar'>
            Sort by: 
            <select ng-model='orderProp'>
                <option value='name'>Alphabetical</option>
                <option value='age'>Newest</option>
            </select>
            You selected the phones to be ordered by: {{orderProp}}
        </div>

        <div class='span10'>
          <select ng-model='limit'>
            <option value='5'>Show 5 per page</option>
            <option value='10'>Show 10 per page</option>
            <option value='15'>Show 15 per page</option>
            <option value='20'>Show 20 per page</option>
          </select>
          <ul class='phones'>
            <li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>
                <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
                <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
                <p>{{phone.snippet}}</p>
            </li>
          </ul>
        </div>
    </div>
  </div>

我添加了一个带有一些值的select标签，以限制将要显示的项目数。我现在想要的是添加分页以显示下一个5,10等

我有一个适用于此的控制器：

function PhoneListCtrl($scope, Phone){
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
    $scope.limit = 5;
}

我还有一个模块，用于从json文件中检索数据。

angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
        return $resource('phones/:phoneId.json', {}, {
            query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
        });
    });

Answer 1

如果您没有太多数据，您可以通过将所有数据存储在浏览器中并过滤在特定时间可见的数据来进行分页。

以下是一个简单的分页示例：http://jsfiddle.net/2ZzZB/56/

该示例位于angular.js github wiki上的小提琴列表中，应该会有所帮助：https://github.com/angular/angular.js/wiki/JsFiddle-Examples

编辑： http://jsfiddle.net/2ZzZB/16/ 至 http://jsfiddle.net/2ZzZB/56/（如果有45个结果，则不会显示“1 / 4.5”）

Answer 2

我刚刚创建了一个JSFiddle，它使用每列显示分页+搜索+顺序 使用Twitter Bootstrap构建代码： http://jsfiddle.net/SAWsA/11/

Answer 3

我已经构建了一个模块，使内存中的分页非常简单。

它允许您通过简单地将ng-repeat替换为dir-paginate，将每页的项目指定为管道过滤器，然后以单个指令的形式将控件放在任意位置{{}}来进行分页。 {1}}

采用Tomarto提出的原始示例，它看起来像这样：

<dir-pagination-controls>

控制器中不需要任何特殊的分页代码。它全部由模块内部处理。

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

来源：dirPagination of GitHub

Answer 4

我知道这个帖子现在已经老了，但我正在回答这个问题，以便让事情更新一些。

使用Angular 1.4及更高版本，您可以直接使用limitTo过滤器，除了接受limit参数外，还接受begin参数。

用法：{{ limitTo_expression | limitTo : limit : begin}}

所以现在你可能不需要使用任何第三方库来实现像分页这样的东西。我创建了一个fiddle来说明相同的内容。

Answer 5

查看此指令：https://github.com/samu/angular-table

它可以自动分类和分页，并为您提供足够的自由来自定义您的表/列表。

Answer 6

以下是使用AngularJS进行分页+过滤的演示代码：

https://codepen.io/lamjaguar/pen/yOrVym

JS：

var app=angular.module('myApp', []);

// alternate - https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
// alternate - http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html

app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
    $scope.currentPage = 0;
    $scope.pageSize = 10;
    $scope.data = [];
    $scope.q = '';

    $scope.getData = function () {
      // needed for the pagination calc
      // https://docs.angularjs.org/api/ng/filter/filter
      return $filter('filter')($scope.data, $scope.q)
     /* 
       // manual filter
       // if u used this, remove the filter from html, remove above line and replace data with getData()

        var arr = [];
        if($scope.q == '') {
            arr = $scope.data;
        } else {
            for(var ea in $scope.data) {
                if($scope.data[ea].indexOf($scope.q) > -1) {
                    arr.push( $scope.data[ea] );
                }
            }
        }
        return arr;
       */
    }

    $scope.numberOfPages=function(){
        return Math.ceil($scope.getData().length/$scope.pageSize);                
    }

    for (var i=0; i<65; i++) {
        $scope.data.push("Item "+i);
    }
  // A watch to bring us back to the 
  // first pagination after each 
  // filtering
$scope.$watch('q', function(newValue,oldValue){             if(oldValue!=newValue){
      $scope.currentPage = 0;
  }
},true);
}]);

//We already have a limitTo filter built-in to angular,
//let's make a startFrom filter
app.filter('startFrom', function() {
    return function(input, start) {
        start = +start; //parse to int
        return input.slice(start);
    }
});

HTML：

<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>

使用ng-repeat列表中的分页

6 个答案:

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

来源：dirPagination of GitHub