AngularJS-Tabelle: Sortierung, OrderBy und Großbuchstabenfilter [Beispiele]

Tabellen sind eines der häufigsten Elemente, die in HTML bei der Arbeit mit Webseiten verwendet werden.

Tabellen in HTML werden mithilfe des HTML-Tags entworfen

Tag – Dies ist das Haupttag, das zum Anzeigen der Tabelle verwendet wird.
– Dieses Tag wird zum Trennen der Zeilen innerhalb der Tabelle verwendet.
– Dieses Tag wird zur Anzeige der tatsächlichen Tabellendaten verwendet.
– Dies wird für die Tabellenkopfdaten verwendet.

Verwenden Sie die oben genannten verfügbaren HTML-Tags zusammen mit AngularJSkönnen wir das Auffüllen von Tabellendaten vereinfachen. Kurz gesagt, die ng-repeat-Direktive wird zum Ausfüllen von Tabellendaten verwendet.

Wir werden in diesem Kapitel untersuchen, wie wir dies erreichen können. Wir werden uns auch ansehen, wie wir die Filter „orderby“ und „uppercase“ zusammen mit dem Attribut „$index“ verwenden können, um Angular-Tabellenindizes anzuzeigen.

Füllen Sie Daten in einer Tabelle aus und zeigen Sie sie an

Wie wir in der Einleitung zu diesem Kapitel besprochen haben, bleibt die Grundlage für die Erstellung der Tabellenstruktur in einer HTML-Seite dieselbe.

Die Struktur der Tabelle wird weiterhin mit den normalen HTML-Tags von erstellt , , Und . Die Daten werden jedoch mithilfe der ng-repeat-Direktive in AngularJS gefüllt.
Schauen wir uns ein einfaches Beispiel an, wie wir Angular-Tabellen implementieren können.
In diesem Beispiel

Wir werden eine Angular-Tabelle erstellen, die Kursthemen zusammen mit ihren Beschreibungen enthält.

Schritt 1) Damit die Tabelle als richtige Tabelle angezeigt werden kann, fügen wir unserer HTML-Seite zunächst ein „Style“-Tag hinzu.

Das Style-Tag wird der HTML-Seite hinzugefügt. Dies ist die Standardmethode zum Hinzufügen aller Formatierungsattribute, die für HTML-Elemente erforderlich sind.
Wir fügen unserer Tabelle zwei Stilwerte hinzu.

Zum einen sollte es einen festen Rand für unsere Angular-Tabelle geben
Zweitens sollte für unsere Angular-Tabellendaten eine Auffüllung eingerichtet werden.

Schritt 2) Der nächste Schritt besteht darin, den Code zum Generieren der Tabelle und ihrer Daten zu schreiben.

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

Code Erklärung

Wir erstellen zunächst eine Variable namens „tutorial“ und weisen ihr in einem Schritt einige Schlüssel-Wert-Paare zu. Jedes Schlüssel-Wert-Paar wird bei der Anzeige der Tabelle als Daten verwendet. Die Tutorial-Variable wird dann dem Scope-Objekt zugewiesen, sodass aus unserer Sicht darauf zugegriffen werden kann.
Dies ist der erste Schritt beim Erstellen einer Tabelle, und wir verwenden die Etikett.
Für jede Datenzeile verwenden wir die „ng-repeat-Direktive“. Diese Anweisung durchläuft jedes Schlüssel-Wert-Paar im Tutorial-Bereichsobjekt mithilfe der Variablen ptutor.
Schließlich verwenden wir die Tag zusammen mit den Schlüssel-Wert-Paaren (ptutor.Name und ptutor.Description), um die Angular-Tabellendaten anzuzeigen.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang

Aus der obigen Ausgabe:

Wir können sehen, dass die Tabelle mit den Daten aus dem Array der im Controller definierten Schlüssel-Wert-Paare ordnungsgemäß angezeigt wird.
Die Tabellendaten wurden generiert, indem jedes der Schlüssel-Wert-Paare mithilfe der „ng-repeat-Direktive“ durchgegangen wurde.

Integrierter AngularJS-Filter

Es ist sehr üblich, die integrierten Filter in AngularJS zu verwenden, um die Art und Weise zu ändern, wie die Daten in den Tabellen angezeigt werden. Wir haben Filter bereits in einem früheren Kapitel in Aktion gesehen. Lassen Sie uns einen kurzen Rückblick auf die Filter werfen, bevor wir fortfahren.

In Angular.JS werden Filter verwendet, um den Wert eines Ausdrucks zu formatieren, bevor er dem Benutzer angezeigt wird. Ein Beispiel für einen Filter ist der Filter „Großbuchstaben“, der eine Zeichenfolge als Ausgabe übernimmt, die Zeichenfolge formatiert und alle Zeichen in der Zeichenfolge in Großbuchstaben anzeigt.

Wenn also im folgenden Beispiel der Wert der Variablen „TutorialName“ „AngularJS“ ist, lautet die Ausgabe des folgenden Ausdrucks „ANGULARJS“.

In diesem Abschnitt werden wir uns genauer ansehen, wie die Filter „orderBy“ und „uppercase“ in Tabellen verwendet werden können.

Sortieren Sie die Tabelle mit dem Filter „OrderBy“.

Mit diesem Filter wird die Tabelle nach einer der Tabellenspalten sortiert. Im vorherigen Beispiel sah die Ausgabe für unsere Angular-Tabellendaten wie unten dargestellt aus.

Regler	Controller im Einsatz
Modelle	Modelle und Bindungsdaten
Richtlinien	Flexibilität der Richtlinien

Schauen wir uns ein Beispiel an, wie wir den „orderBy“-Filter verwenden und die Angular-Tabellendaten anhand der ersten Spalte in der Tabelle sortieren können.

<!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 Erklärung

Wir verwenden denselben Code wie zum Erstellen unserer Tabelle. Der einzige Unterschied besteht dieses Mal darin, dass wir den Filter „orderBy“ zusammen mit der ng-repeat-Direktive verwenden. In diesem Fall sagen wir, dass wir die Tabelle nach dem Schlüssel „Name“ ordnen möchten.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang

Aus der Ausgabe,

Wir können sehen, dass die Daten in der Angular-Tabelle gemäß den Daten in der ersten Spalte sortiert wurden. In unserem Datensatz stammen die „Directives“-Daten aus den „Models“-Daten, aber da wir den orderBy-Filter angewendet haben, werden die Tabellen entsprechend sortiert.

Anzeigetabelle mit Großbuchstabenfilter

Wir können den Großbuchstabenfilter auch verwenden, um die Daten in der Angular-Tabelle in Großbuchstaben umzuwandeln.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

<!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 Erklärung

Wir verwenden denselben Code wie zum Erstellen unserer Tabelle. Der einzige Unterschied besteht diesmal darin, dass wir den Großbuchstabenfilter verwenden. Wir verwenden diesen Filter in Verbindung mit „ptutor.Name“, sodass der gesamte Text in der ersten Spalte in Großbuchstaben angezeigt wird.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang

Aus der Ausgabe,

Wir können sehen, dass durch die Verwendung des Filters „Großbuchstaben“ alle Daten in der ersten Spalte mit Großbuchstaben angezeigt werden.

Tabellenindex ($index) anzeigen

Um den Tabellenindex anzuzeigen, fügen Sie a hinzu mit $index.

Schauen wir uns ein Beispiel an, wie wir dies erreichen können.

<!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 Erklärung

Wir verwenden denselben Code wie zum Erstellen unserer Tabelle. Der einzige Unterschied besteht diesmal darin, dass wir unserer Tabelle eine zusätzliche Zeile hinzufügen, um die Indexspalte anzuzeigen. In dieser zusätzlichen Spalte verwenden wir die von AngularJS bereitgestellte Eigenschaft „$index“ und verwenden dann den Operator „+1“, um den Index für jede Zeile zu erhöhen.

Wenn der Code erfolgreich ausgeführt wird, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgang

Aus der Ausgabe,

Sie können sehen, dass eine zusätzliche Spalte erstellt wurde. In dieser Spalte sehen wir die Indizes, die für jede Zeile erstellt werden.

Zusammenfassung

Tabellenstrukturen werden mithilfe der darin verfügbaren Standard-Tags erstellt HTML. Die Daten in der Tabelle werden mit der Direktive „ng-repeat“ gefüllt.
Der orderBy-Filter kann verwendet werden, um die Tabelle basierend auf einer beliebigen Spalte innerhalb der Tabelle zu sortieren.
Der Großbuchstabenfilter kann verwendet werden, um die Daten in jeder textbasierten Spalte in Großbuchstaben anzuzeigen.
Mit der Eigenschaft „$index“ kann ein Index für die Tabelle erstellt werden.
Ein häufiges Problem bei der Entwicklung mit AngularJS.JS-Tabellen ist die Implementierung großer Datensätze mit mehr als 1000 Datenzeilen. Manchmal die ng-Wiederholung Die Direktive kann dazu führen, dass die gesamte Seite nicht mehr reagiert. In einem solchen Fall ist es immer besser, eine Paginierung zu verwenden, bei der die Datenzeilen auf mehrere Seiten verteilt sind.

Du magst vielleicht:

Füllen Sie Daten in einer Tabelle aus und zeigen Sie sie an

Code Erklärung

Ausgang

ÄHNLICHE ARTIKEL

Integrierter AngularJS-Filter

Sortieren Sie die Tabelle mit dem Filter „OrderBy“.

Code Erklärung

Ausgang

Anzeigetabelle mit Großbuchstabenfilter

Code Erklärung

Ausgang

Tabellenindex ($index) anzeigen

Code Erklärung

Ausgang

Zusammenfassung