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 erstellt
-Tag - Dies ist das Haupt-Tag, das zum Anzeigen der Tabelle verwendet wird.
- Dieses Tag wird zum Trennen der Zeilen in der Tabelle verwendet.
- Dieses Tag wird zum Anzeigen der tatsächlichen Tabellendaten verwendet.
- Dies wird für die Tabellenkopfdaten verwendet.
Mit den oben verfügbaren HTML-Tags zusammen mit AngularJS können wir das Auffüllen von Tabellendaten vereinfachen. Kurz gesagt, die Anweisung ng-repeat wird zum Ausfüllen von Tabellendaten verwendet.
In diesem Kapitel werden wir uns ansehen, wie dies erreicht werden kann. Wir werden uns auch ansehen, wie wir die Filter orderby und Großbuchstaben zusammen mit dem Attribut $ index verwenden können, um Angular-Tabellenindizes anzuzeigen.
In diesem Tutorial lernen Sie:
Daten in eine Tabelle einfügen und anzeigen
AngularJS eingebauter Filter
Tabelle mit OrderBy-Filter sortieren
Tabelle mit Großbuchstabenfilter anzeigen
Zeigen Sie den Tabellenindex an ($ index)
Daten in eine Tabelle einfügen und anzeigen
Wie wir in der Einführung 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
,
,
und
erstellt. Die Daten werden jedoch mithilfe der ng-repeat-Direktive in AngularJS aufgefüllt.
Schauen wir uns ein einfaches Beispiel an, wie wir Angular-Tabellen implementieren können.
In diesem Beispiel ist
Wir werden eine Angular-Tabelle erstellen, die Kursthemen zusammen mit ihren Beschreibungen enthält.
Schritt 1) Zuerst fügen wir unserer HTML-Seite ein "style" -Tag hinzu, damit die Tabelle als richtige Tabelle angezeigt werden kann.
Das Style-Tag wird der HTML-Seite hinzugefügt. Dies ist die Standardmethode zum Hinzufügen von Formatierungsattributen, die für HTML-Elemente erforderlich sind.
Wir fügen unserer Tabelle zwei Stilwerte hinzu.
Eine ist, dass es einen festen Rand für unsere Angular-Tabelle geben sollte und
Zweitens sollte für unsere Angular-Tabellendaten eine Auffüllung vorhanden sein.
Schritt 2) Der nächste Schritt besteht darin, den Code zum Generieren der Tabelle und ihrer Daten zu schreiben.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Code Erläuterung:
Wir erstellen zuerst 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 Bereichsobjekt zugewiesen, damit aus unserer Sicht darauf zugegriffen werden kann.
Dies ist der erste Schritt beim Erstellen einer Tabelle, und wir verwenden das
-Tag.
Für jede Datenzeile verwenden wir die "ng-repeat-Direktive". Diese Anweisung durchläuft jedes Schlüssel-Wert-Paar im tuto, rial scope-Objekt unter Verwendung der Variablen ptutor.
Schließlich verwenden wir das
-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 die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der obigen Ausgabe,
Wir können sehen, dass die Tabelle mit den Daten aus dem Array von Schlüssel-Wert-Paaren, die in der Steuerung definiert sind, korrekt angezeigt wird.
Die Tabellendaten wurden generiert, indem jedes der Schlüssel-Wert-Paare unter Verwendung der "ng-repeat-Direktive" durchlaufen wurde.
AngularJS eingebauter Filter
Es ist sehr üblich, die in AngularJS integrierten Filter zu verwenden, um die Art und Weise zu ändern, in der die Daten in den Tabellen angezeigt werden. Wir haben bereits in einem früheren Kapitel Filter in Aktion gesehen. Lassen Sie uns einen kurzen Rückblick auf die Filter geben, bevor wir fortfahren.
In Angular.JS werden Filter verwendet, um den Wert des Ausdrucks zu formatieren, bevor er dem Benutzer angezeigt wird. Ein Beispiel für einen Filter ist der Großbuchstabenfilter, der eine Zeichenfolgenausgabe übernimmt, die Zeichenfolge formatiert und alle Zeichen in der Zeichenfolge als Großbuchstaben anzeigt.
Wenn im folgenden Beispiel der Wert der Variablen 'TutorialName' 'AngularJS' ist, lautet die Ausgabe des folgenden Ausdrucks 'ANGULARJS'.
{{TurotialName | Großbuchstaben}}
In diesem Abschnitt werden wir uns genauer ansehen, wie die Filter orderBy und Großbuchstaben in Tabellen verwendet werden können.
Tabelle mit OrderBy-Filter sortieren
Dieser Filter wird verwendet, um die Tabelle basierend auf einer der Tabellenspalten zu sortieren. Im vorherigen Beispiel wurde die Ausgabe für unsere Angular-Tabellendaten wie unten gezeigt angezeigt.
Controller
Controller in Aktion
Modelle
Modelle und Bindungsdaten
Richtlinien
Flexibilität von Richtlinien
Schauen wir uns ein Beispiel an, wie wir den Filter "orderBy" verwenden und die Angular-Tabellendaten anhand der ersten Spalte in der Tabelle sortieren können.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Code Erläuterung:
Wir verwenden denselben Code wie beim Erstellen unserer Tabelle. Der einzige Unterschied besteht diesmal darin, dass wir den Filter "orderBy" zusammen mit der Anweisung ng-repeat 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 die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
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 "Direktiven" -Daten aus den "Modell" -Daten. Da wir jedoch den orderBy-Filter angewendet haben, werden die Tabellen entsprechend sortiert.
Tabelle mit Großbuchstabenfilter anzeigen
Wir können auch den Großbuchstabenfilter verwenden, um die Daten in der Angular-Tabelle in Großbuchstaben zu ändern.
Schauen wir uns ein Beispiel an, wie wir dies erreichen können.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Code Erläuterung:
Wir verwenden denselben Code wie beim Erstellen unserer Tabelle. Der einzige Unterschied besteht diesmal darin, dass wir den Großbuchstabenfilter verwenden. Wir verwenden diesen Filter in Verbindung mit "ptutor.Name", damit der gesamte Text in der ersten Spalte in Großbuchstaben angezeigt wird.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
Aus der Ausgabe,
Wir können sehen, dass mit dem Filter "Großbuchstaben" alle Daten in der ersten Spalte mit Großbuchstaben angezeigt werden.
Zeigen Sie den Tabellenindex an ($ index)
Fügen Sie zum Anzeigen des Tabellenindex ein
mit $ index hinzu.
Schauen wir uns ein Beispiel an, wie wir dies erreichen können.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Code Erläuterung:
Wir verwenden denselben Code wie beim 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 erhöhen dann den Index für jede Zeile mit dem Operator +1.
Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.
Ausgabe:
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 mit den in HTML verfügbaren Standard-Tags erstellt. 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 in 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 von AngularJS.JS-Tabellen ist die Implementierung großer Datasets mit mehr als 1000 Datenzeilen. Manchmal reagiert die ng-repeat-Direktive nicht mehr, und daher reagiert die gesamte Seite manchmal nicht mehr. In einem solchen Fall ist es immer besser, eine Paginierung zu haben, bei der die Datenzeilen auf mehrere Seiten verteilt sind.
