1. ホーム
  2. javascript

[解決済み] ng-repeat を用いたリストのページネーション

2022-06-25 06:11:55

質問

私は自分のリストにページを追加しようとしています。私は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}
        });
    });

どのように解決するのですか?

データ量がそれほど多くない場合は、ブラウザにすべてのデータを保存して、ある時点で表示されているものをフィルタリングするだけで、間違いなくページネーションができます。

簡単なページネーションの例です。 http://jsfiddle.net/2ZzZB/56/

その例は、angular.jsのgithub wikiのfiddlesのリストにあったので、参考になるはずです。 https://github.com/angular/angular.js/wiki/JsFiddle-Examples

EDIT http://jsfiddle.net/2ZzZB/16/ から http://jsfiddle.net/2ZzZB/56/ (結果が45件の場合、"1/4.5" は表示されません)