使用ng-repeat列表中的分页

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

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

Answer 3

我已经构建了一个模块,使内存分页非常简单.

它可以让你通过简单的更换进行分页ng-repeat与dir-paginate,指定每页的项目作为管道过滤器,然后滴加无论你在一个单一的指令的形式像控制,<dir-pagination-controls>

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

<ul class='phones'>
    <li class='thumbnail' dir-paginate='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit | itemsPerPage: 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>

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

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

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

资料来源:GitHub的dirPagination

Answer 4

我知道这个线程现在已经很旧了，但我正在回答这个问题，以使事情有所更新。

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

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

因此，现在您可能不需要使用任何第三方库来实现诸如分页之类的功能。我创建了一个小提琴来说明这一点。