使用分页NG-重复名单上 [英] Pagination on a list using ng-repeat

问题描述

我想页面添加到我的列表中。我跟着AngularJS教程，关于智能手机之一，我想只显示一定数量的对象。这里是我的html文件：

 ＆LT; D​​IV CLASS ='集装箱液'＆GT;
    ＆LT; D​​IV CLASS ='排液'＆GT;
        ＆LT; D​​IV CLASS ='SPAN2'＆GT;
            搜索：LT;输入NG-模式='搜索栏'＆GT;
            排序方式：
            ＆LT;选择NG-模式='orderProp'＆GT;
                ＆LT;期权价值='名字'＆GT;按字母＆LT; /选项＆GT;
                ＆LT;期权价值='年龄'＆GT;最新＆LT; /选项＆GT;
            ＆LT; /选择＆GT;
            您选择的手机被责令：{{orderProp}}
        ＆LT; / DIV＆GT;        ＆LT; D​​IV CLASS ='span10'＆GT;
          ＆LT;选择NG-模式='限制'＆GT;
            ＆LT;期权价值=5＆gt;显示5每页＆LT; /选项＆GT;
            ＆LT;期权价值='10'＆gt;显示10每页＆LT; /选项＆GT;
            ＆LT;期权价值='15'＆gt;显示15每页＆LT; /选项＆GT;
            ＆LT;期权价值=20＆gt;显示20个每页＆LT; /选项＆GT;
          ＆LT; /选择＆GT;
          ＆LT; UL类='手机'＆GT;
            ＆LT;李类='缩略图'NG重复='在手机电话|过滤：搜索栏|排序依据：orderProp | limitTo：极限'＆GT;
                ＆LT; A HREF ='＃/手机/ {{phone.id}}'类='拇指'＆GT;＆LT; IMG NG-SRC ='{{phone.imageUrl}}'＆GT;＆LT; / A＆GT;
                ＆LT; A HREF ='＃/手机/ {{phone.id}}'＆GT; {{phone.name}}＆LT; / A＆GT;
                ＆所述p为H.; {{phone.snippet}}＆下; / P＆GT;
            ＆LT; /李＆GT;
          ＆LT; / UL＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

我以限制将要显示的项目数加有一些值的选择标记。我现在想的是添加的分页显示，未来5，10等。

我有一个控制器，这个作品：

 函数PhoneListCtrl（$范围，电话）{
    $ scope.phones = Phone.query（）;
    $ scope.orderProp ='年龄';
    $ scope.limit = 5;
}
 

和我也有一个模块，以从JSON文件中检索数据。

  angular.module（'phonecatServices'，['ngResource']）。
    工厂（'电话'，函数（$资源）{
        返回$资源（'手机/：phoneId.json'，{}，{
            查询：{方法：GET，则params：{phoneId：'手机'}，IsArray的：真正}
        }）;
    }）;
 

解决方案

如果你没有太多的数据，你绝对可以通过只是存储在浏览器中的所有数据和过滤什么是在一定的时间做可见分页。

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

这例子是在angular.js github上wiki，它应该是有帮助的小提琴名单上：<一href=\"https://github.com/angular/angular.js/wiki/JsFiddle-Examples\">https://github.com/angular/angular.js/wiki/JsFiddle-Examples

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

I'm trying to add pages to my list. I followed the AngularJS tutorial, the one about smartphones and I'm trying to display only certain number of objects. Here is my html file:

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

I've added a select tag with some values in order to limit the number of items that will be displayed. What I want now is to add the pagination to display the next 5, 10, etc.

I have a controller that works with this:

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

And also I have a module in order to retrieve the data from the json files.

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

解决方案

If you have not too much data, you can definitely do pagination by just storing all the data in the browser and filtering what's visible at a certain time.

Here's a simple pagination example: http://jsfiddle.net/2ZzZB/56/

That example was on the list of fiddles on the angular.js github wiki, which should be helpful: https://github.com/angular/angular.js/wiki/JsFiddle-Examples

EDIT: http://jsfiddle.net/2ZzZB/16/ to http://jsfiddle.net/2ZzZB/56/ (won't show "1/4.5" if there is 45 results)

这篇关于使用分页NG-重复名单上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！