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

  1. Tag – Dies ist das Haupttag, das zum Anzeigen der Tabelle verwendet wird.
  2. – Dieses Tag wird zum Trennen der Zeilen innerhalb der Tabelle verwendet.
  3. – Dieses Tag wird zur Anzeige der tatsächlichen Tabellendaten verwendet.
  4. – 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) Wir werden unserer HTML-Seite zunächst einen „Style“-Tag hinzufügen, damit die Tabelle als richtige Tabelle angezeigt werden kann.

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

  1. 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.
  2. 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.

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

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

  1. 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.
  2. Dies ist der erste Schritt beim Erstellen einer Tabelle, und wir verwenden die Etikett.
  3. 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.
  4. 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 wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Output

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

Aus der obigen Ausgabe:

  • Wir können sehen, dass die Tabelle mit den Daten aus dem im Controller definierten Array von Schlüssel-Wert-Paaren 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 in AngularJS integrierten Filter zu verwenden, um die Art und Weise zu ändern, wie die Daten in den Tabellen angezeigt werden. Wir haben bereits in einem früheren Kapitel Filter in Aktion gesehen. Lassen Sie uns kurz die Filter zusammenfassen, 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 „Großbuchstaben“-Filter, der eine Zeichenfolgenausgabe übernimmt, die Zeichenfolge formatiert und alle Zeichen in der Zeichenfolge als Großbuchstaben anzeigt.

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

{{ TurotialName | uppercase }}

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.

Sortieren Sie die Tabelle mit dem Filter „OrderBy“.

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

  1. 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 wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Output

Sortieren Sie die Tabelle mit dem Filter „OrderBy“.

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.

Anzeigetabelle mit Großbuchstabenfilter

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

  1. Wir verwenden denselben Code wie zum Erstellen unserer Tabelle. Der einzige Unterschied besteht dieses Mal 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 wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Output

Anzeigetabelle mit Großbuchstabenfilter

Aus der Ausgabe,

  • Wir können sehen, dass durch die Verwendung des „Großbuchstaben“-Filters 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.

Zeigen Sie den Tabellenindex an

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

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

Wenn der Code erfolgreich ausgeführt wurde, wird Folgendes angezeigt:wing Die Ausgabe wird angezeigt, wenn Sie Ihren Code im Browser ausführen.

Output

Zeigen Sie den Tabellenindex an

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.