首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用ng-repeat对列表进行分页

使用ng-repeat对列表进行分页
EN

Stack Overflow用户
提问于 2012-07-20 22:17:28
回答 4查看 232.3K关注 0票数 133

我正在尝试添加页面到我的列表中。我遵循了AngularJS教程,这是一个关于智能手机的教程,我试图只显示一定数量的对象。下面是我的html文件:

代码语言:javascript
复制
  <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,等等。

我有一个控制器可以处理这个:

代码语言:javascript
复制
function PhoneListCtrl($scope, Phone){
    $scope.phones = Phone.query();
    $scope.orderProp = 'age';
    $scope.limit = 5;
}

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

代码语言:javascript
复制
angular.module('phonecatServices', ['ngResource']).
    factory('Phone', function($resource){
        return $resource('phones/:phoneId.json', {}, {
            query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
        });
    });
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11581209

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档