AngularJSテーブル：orderByと大文字フィルターによるソート
編集チーム
⚡ スマートサマリー
AngularJS のテーブルのソート、順序付け、テキストの書式設定はすべて、ng-repeat ディレクティブとフィルター式に依存しています。このページでは、orderBy、uppercase、filter、および $index を使用して、プレーンな HTML テーブルをライブでデータ駆動型のグリッドに変換する方法を示します。
テーブルは、Web ページを操作するときに HTML で使用される一般的な要素の XNUMX つです。
テーブル HTML HTMLタグを使用して設計されています
- tag – これはテーブルを表示するために使用される主要なタグです。
- – このタグは、テーブル内の行を分離するために使用されます。
- – このタグは実際のテーブルデータを表示するために使用されます。
- – これはテーブルのヘッダー データに使用されます。
上記の利用可能な HTML タグを使用すると、 AngularJSを使用すると、テーブル データの入力が簡単になります。 つまり、ng-repeat ディレクティブはテーブル データを埋めるために使用されます。
この章では、これを実現する方法を見ていきます。また、orderByフィルターとuppercaseフィルター、そして$index属性を使用してAngularJSテーブルのインデックスを表示する方法についても見ていきます。最初のステップは、マークアップそのものです。
テーブルにデータを入力して表示する
この章の導入部分で説明したように、HTML ページでテーブル構造を作成する基本は変わりません。
テーブルの構造は、通常の HTML タグを使用して作成されます。 、 、 そして。 ただし、データは AngularJS の ng-repeat ディレクティブを使用して設定されます。
AngularJSのテーブルを実装する方法の簡単な例を見てみましょう。
この例では、
コースのトピックとその説明を記載したAngularJSテーブルを作成します。
ステップ1） まず、テーブルが適切なテーブルとして表示されるように、HTML ページに「スタイル」タグを追加します。
- style タグが HTML ページに追加されます。 これは、HTML 要素に必要な書式設定属性を追加する標準的な方法です。
- XNUMX つのスタイル値をテーブルに追加します。
- 1つ目は、AngularJS テーブルにしっかりとした境界線を設けること、そして
- 2つ目は、AngularJSのテーブルデータにパディング（余白）を設ける必要があるということです。
ステップ2） 次のステップでは、テーブルとそのデータを生成するコードを作成します。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
⚠️ 警告: この掲載内容は掲載されたとおりに再現されていますが、そのうち4行に誤りがあります。 chrset スペルミス charset3つのAngularJSビルドが同時にロードされますが、これは多すぎます。 lib/bootstrap.js (NAIST) と lib/bootstrap.css 存在しません。 angular.min.js のみ。
Code 説明
- まず、「tutorial」という変数を作成し、XNUMX つのステップでいくつかのキーと値のペアを割り当てます。 各キーと値のペアは、テーブルを表示するときにデータとして使用されます。 次に、チュートリアル変数がスコープ オブジェクトに割り当てられ、ビューからアクセスできるようになります。
- これはテーブル作成の最初のステップであり、 鬼ごっこ。
- データの各行に対して、「ng-repeat ディレクティブ」を使用しています。 このディレクティブは、変数 ptutor を使用して、チュートリアル スコープ オブジェクト内の各キーと値のペアを処理します。
- 最後に、私たちはタグとキーと値のペア (ptutor.Name と ptutor.DescriptAngularJS テーブルデータを表示するために、ion) を使用します。
コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。
出力
上記の出力から、
- コントローラーで定義されたキーと値のペアの配列のデータを使用して、テーブルが適切に表示されていることがわかります。
- テーブル データは、「ng-repeat ディレクティブ」を使用して各キーと値のペアを調べることによって生成されました。
生の行はあくまで出発点であり、フィルタによってそれらの行の順序や書式が決定される。
AngularJS 組み込みフィルター
AngularJS に組み込まれているフィルターを使用して、テーブル内のデータの表示方法を変更することは非常に一般的です。フィルターの動作については、前の章ですでに説明しました。先に進む前に、フィルターについて簡単におさらいしましょう。
AngularJSでは、フィルターを使用して、式をユーザーに表示する前に値をフォーマットします。フィルターの一例として、「uppercase」フィルターがあります。このフィルターは文字列出力を受け取り、文字列をフォーマットして、文字列内のすべての文字を大文字として表示します。
したがって、以下の例では、変数「TutorialName」の値が「AngularJS」の場合、以下の式の出力は「ANGULARJS」になります。
{{ TutorialName | uppercase }}
このセクションでは、orderBy フィルターと大文字フィルターをテーブルでどのように使用できるかを詳しく見ていきます。
テーブルで使用される一般的なAngularJSフィルター
以下の表は、ng-repeat式内で最も頻繁に使用されるフィルターを比較したものです。
| フィルター | 目的 | 例: |
|---|---|---|
| 注文する | キーに基づいて行をソートします | | orderBy : 'Name' |
| filter | 一致する行を保持します | | filter : searchText |
| 大文字 | テキストを大文字にする | | uppercase |
| 小文字 | テキストを下げる | | lowercase |
| 制限 | キャップ行数 | | limitTo : 25 |
| 通貨 | お金のフォーマット | | currency : '$' |
| date | 日付形式 | | date : 'dd MMM yyyy' |
| 数 | 小数点以下の値を設定します | | number : 2 |
読者が最初に求めるフィルターは並べ替えなので、次に並べ替えフィルターが重要になります。
OrderBy フィルターを使用してテーブルを並べ替える
このフィルターは、テーブルの列のいずれかに基づいてテーブルを並べ替えるために使用されます。前の例では、AngularJS テーブルデータの出力は以下のようになりました。
| コントローラ | コントローラーの動作中 |
| Models | モデルとバインディング データ |
| 説明書 | 指令の柔軟性 |
「orderBy」フィルターを使用して、AngularJS テーブルの最初の列に基づいてテーブルデータを並べ替える方法の例を見てみましょう。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
Code 説明
- テーブルの作成時に使用したのと同じコードを使用していますが、今回の唯一の違いは、ng-repeat ディレクティブとともに「orderBy」フィルターを使用していることです。 この場合、「名前」というキーによってテーブルを並べ替えたいと言っています。
コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。
出力
出力から、
- AngularJS テーブルのデータは、最初の列のデータに従ってソートされていることがわかります。配列はコントローラー、モデル、ディレクティブの順に宣言されているため、フィルターを適用しない場合は、行はその順序で表示されます。
orderBy : 'Name'名前の値をアルファベット順に並べることで、ディレクティブがモデルよりも前に移動し、コントローラー、ディレクティブ、モデルという順序になります。
並べ替える Reverse 列ヘッダーから
orderBy フィルターは 2 番目の引数を受け取ります。 true 方向を反転し、キーとフラグの両方をスコープに保存することで、読者はヘッダーをクリックしてテーブルを再ソートできます。 参照による順序付け 説明します。
<table> <tr> <th ng-click="sortKey='Name'; reverse=!reverse">Name</th> <th ng-click="sortKey='Description'; reverse=!reverse">Description</th> </tr> <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table>
順序を変更すると、行の表示順序が変わります。次のフィルターは、単一の列の表示方法を変更します。
大文字フィルターを使用したテーブルの表示
また、大文字フィルターを使用して、AngularJS テーブル内のデータを大文字に変換することもできます。
これを実現する方法の例を見てみましょう。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{ptutor.Name | uppercase}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
Code 説明
- テーブルを作成するときに使用したのと同じコードを使用していますが、今回の唯一の違いは、大文字フィルターを使用していることです。このフィルターを「ptutor.Name」と組み合わせて使用すると、最初の列のテキストがすべて大文字で表示されます。
コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。
出力
出力から、
- 「大文字」フィルターを使用すると、最初の列のすべてのデータが大文字で表示されることがわかります。
列の書式設定は便利であり、読者はしばしばその横に行番号を表示してほしいと望む。
テーブルインデックスを表示する($index)
テーブルインデックスを表示するには、 $index を使用します。
これを実現する方法の例を見てみましょう。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> </head> <body> <title>Event Registration</title> <style> table,th,td{ border: 1px solid grey; padding:5px; } </style> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoController"> <table> <tr ng-repeat="ptutor in tutorial"> <td>{{$index + 1}}</td> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table> </div> <script type="text/javascript"> var app = angular.module('DemoApp',[]); app.controller('DemoController',function($scope) { $scope.tutorial = [ {Name:"Controllers",Description :"Controllers in action"}, {Name:"Models",Description :"Models and binding data"}, {Name:"Directives",Description :"Flexibility of Directives"} ]}); </script> </body> </html>
Code 説明
- テーブルを作成するときに使用したのと同じコードを使用していますが、今回の唯一の違いは、インデックス列を表示するためにテーブルに行を追加していることです。この追加列では、AngularJS によって提供される「$index」プロパティを使用し、+1 演算子を使用して各行のインデックスを増分しています。
コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。
出力
出力から、
- 追加の列が作成されたことがわかります。 この列では、行ごとに作成されているインデックスが表示されます。
1つの画面には3行しか表示できない。しかし、実際のデータセットはそうはいかないため、読者は検索機能を利用する必要がある。
AngularJSテーブルデータのフィルタリングと検索方法
AngularJSには、という名前のフィルターが付属しています。 filterng-repeat の後に配置すると、配列内のすべての項目を値と比較し、一致する行のみを残します。ng-model を使用してその値をテキストボックスにバインドすると、イベントハンドラやコントローラーコードなしで、読者が入力するにつれてテーブルの幅が自動的に狭まります。
ライブ検索を追加する Box
テーブルの上に1つの入力フィールドを追加し、配列をフィルターに通します。この2つは同じスコーププロパティを共有するため、AngularJSはキー入力ごとに式を再評価します。
<input type="text" ng-model="searchText" placeholder="Search topics"> <table> <tr ng-repeat="ptutor in tutorial | filter : searchText"> <td>{{ptutor.Name}}</td> <td>{{ptutor.Description}}</td> </tr> </table>
Code 説明：
- 入力欄には、入力された内容が書き込まれます。
searchText範囲について。 filter : searchText名前または Description には、大文字小文字を区別せずにその部分文字列が含まれています。- 代わりに単一の列を検索するには、オブジェクトを渡します。
filter : {Name : searchText}. - フィルターチェーンなので
| filter : searchText | orderBy : 'Name'まず捜索を行い、次に生存者を分類する。
大きなテーブルはレスポンシブデザインを維持する
AngularJS テーブルの開発中に遭遇する一般的な問題の 1 つは、1000 行以上の大きなデータセットです。 NGリピート ディレクティブは行ごとにスコープとウォッチャーを作成するため、ページが応答しなくなる可能性があります。代わりに、行を複数のページに分散させて追加します。 track by そのため、既存の行は再構築されるのではなく、再利用されます。
<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">
