AngularJS テーブル: 並べ替え、OrderBy、大文字フィルター [例]

テーブルは、Web ページを操作するときに HTML で使用される一般的な要素の XNUMX つです。

HTML のテーブルは HTML タグを使用して設計されます。

tag – これはテーブルを表示するために使用される主要なタグです。
– このタグは、テーブル内の行を分離するために使用されます。
– このタグは実際のテーブルデータを表示するために使用されます。
– これはテーブルのヘッダーデータに使用されます。

上記の利用可能な HTML タグを使用すると、 AngularJSを使用すると、テーブルデータの入力が簡単になります。つまり、ng-repeat ディレクティブはテーブルデータを埋めるために使用されます。

この章では、これを実現する方法について説明します。 $index 属性を使用して Angular テーブルインデックスを表示するとともに、orderby フィルターと uppercase フィルターを使用する方法についても説明します。

テーブルにデータを入力して表示する

この章の導入部分で説明したように、HTML ページでテーブル構造を作成する基本は変わりません。

テーブルの構造は、通常の HTML タグを使用して作成されます。、、そして。ただし、データは AngularJS の ng-repeat ディレクティブを使用して設定されます。
Angular テーブルを実装する方法の簡単な例を見てみましょう。
この例では、

コースのトピックとその説明を含む Angular テーブルを作成します。

ステップ1） まず、テーブルが適切なテーブルとして表示されるように、HTML ページに「スタイル」タグを追加します。

style タグが HTML ページに追加されます。これは、HTML 要素に必要な書式設定属性を追加する標準的な方法です。
XNUMX つのスタイル値をテーブルに追加します。

XNUMX つは、Angular テーブルに実線の境界線が必要であることです。
XNUMX つ目は、Angular テーブルデータにパディングを配置する必要があることです。

ステップ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>

コードの説明

まず、「tutorial」という変数を作成し、XNUMX つのステップでいくつかのキーと値のペアを割り当てます。各キーと値のペアは、テーブルを表示するときにデータとして使用されます。次に、チュートリアル変数がスコープオブジェクトに割り当てられ、ビューからアクセスできるようになります。
これはテーブル作成の最初のステップであり、鬼ごっこ。
データの各行に対して、「ng-repeat ディレクティブ」を使用しています。このディレクティブは、変数 ptutor を使用して、チュートリアルスコープオブジェクト内の各キーと値のペアを処理します。
最後に、私たちはタグとキーと値のペア (ptutor.Name と ptutor.Description) を使用して、Angular テーブルデータを表示します。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力

上記の出力から、

コントローラーで定義されたキーと値のペアの配列のデータを使用して、テーブルが適切に表示されていることがわかります。
テーブルデータは、「ng-repeat ディレクティブ」を使用して各キーと値のペアを調べることによって生成されました。

AngularJS 組み込みフィルター

AngularJS に組み込まれているフィルターを使用して、テーブル内のデータの表示方法を変更することは非常に一般的です。フィルターの動作については、前の章ですでに説明しました。先に進む前に、フィルターについて簡単におさらいしましょう。

Angular.JS では、フィルターは、ユーザーに表示される前に式の値をフォーマットするために使用されます。フィルターの例としては、文字列出力を受け取り、文字列をフォーマットして文字列内のすべての文字を大文字で表示する「大文字」フィルターがあります。

したがって、以下の例では、変数「TutorialName」の値が「AngularJS」の場合、以下の式の出力は「ANGULARJS」になります。

このセクションでは、orderBy フィルターと大文字フィルターをテーブルでどのように使用できるかを詳しく見ていきます。

OrderBy フィルターを使用してテーブルを並べ替える

このフィルターは、テーブル列の XNUMX つに基づいてテーブルを並べ替えるのに使用されます。前の例では、Angular テーブルデータの出力は次のように表示されました。

コントローラ	コントローラーの動作中
Models	モデルとバインディングデータ
説明書	指令の柔軟性

「orderBy」フィルターを使用し、テーブルの最初の列を使用して Angular テーブルデータを並べ替える方法の例を見てみましょう。

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

コードの説明

テーブルの作成時に使用したのと同じコードを使用していますが、今回の唯一の違いは、ng-repeat ディレクティブとともに「orderBy」フィルターを使用していることです。この場合、「名前」というキーによってテーブルを並べ替えたいと言っています。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力

出力から、

Angular テーブルのデータが最初の列のデータに従って並べ替えられていることがわかります。データセットでは、「ディレクティブ」データは「モデル」データから取得されますが、orderBy フィルターを適用したため、テーブルはそれに応じて並べ替えられます。

大文字フィルターを使用したテーブルの表示

大文字フィルターを使用して、Angular テーブルのデータを大文字に変更することもできます。

これを実現する方法の例を見てみましょう。

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

コードの説明

テーブルを作成するときに使用したのと同じコードを使用していますが、今回の唯一の違いは、大文字フィルターを使用していることです。このフィルターを「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>

コードの説明

テーブルを作成するときに使用したのと同じコードを使用していますが、今回の唯一の違いは、インデックス列を表示するためにテーブルに行を追加していることです。この追加列では、AngularJS によって提供される「$index」プロパティを使用し、+1 演算子を使用して各行のインデックスを増分しています。

コードが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力

出力から、

追加の列が作成されたことがわかります。この列では、行ごとに作成されているインデックスが表示されます。

製品概要

テーブル構造は、内部で使用可能な標準タグを使用して作成されます。 HTML。テーブル内のデータは、「ng-repeat」ディレクティブを使用して設定されます。
orderBy フィルターを使用すると、テーブル内の任意の列に基づいてテーブルを並べ替えることができます。
大文字フィルターを使用すると、テキストベースの列のデータを大文字で表示できます。
「$index」プロパティを使用して、テーブルのインデックスを作成できます。
AngularJS.JS テーブルを使用した開発中に遭遇する一般的な問題の 1000 つは、XNUMX 行を超えるデータを含む大規模なデータセットの実装です。時々、 NGリピートディレクティブが応答しなくなる可能性があるため、ページ全体が応答しなくなることがあります。このような場合は、データ行を複数のページに分散するページネーションを使用することをお勧めします。

テーブルにデータを入力して表示する

コードの説明

出力

関連記事

AngularJS 組み込みフィルター

OrderBy フィルターを使用してテーブルを並べ替える

コードの説明

出力

大文字フィルターを使用したテーブルの表示

コードの説明

出力

テーブルインデックスを表示する($index)

コードの説明

出力

製品概要

ニュースレターに登録する