[解決済み] 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" は表示されません)
関連
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] Javascriptで文字列の最後の文字を切り取るにはどうしたらいいですか?
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] JavaScriptでドロップダウンリストの選択値を取得する
-
[解決済み] 配列の反復処理に "for...in "を使用するのは、なぜ良くないのでしょうか?
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
vueにおけるv-forループオブジェクトのプロパティ
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み] テスト
-
[解決済み】"フォームが接続されていないため、フォームの送信がキャンセルされました "というエラーの取得について
-
[解決済み】 `string.split is not a function` というエラーの原因は何ですか?
-
HTML5 LocalStorage ローカルストレージとセッションストレージの使用法