AngularJS - Umgang mit sich wiederholenden Elementen

Ein wichtiger Bestandteil von Webanwendungen ist die AuflistungsbeispielDies wird immer dann wichtig sein, wenn wir mit Datenbanken arbeiten, da wir gespeicherte Artikel anzeigen müssen und beispielsweise, wenn wir einen Online-Shop betreiben, wir eine Produktliste anzeigen müssen.
Was wir verstehen müssen, obwohl die Datensätze unterschiedlich sind, die Elemente als solche wiederholt werden, da es sich wahrscheinlich um Zeilen einer Tabelle oder einer geordneten Liste handelt, unabhängig vom Inhaltsunterschied stellt kein Unterschied in der Struktur dar.
AngularJS verkompliziert unser Leben nicht, einfach wenn wir eine Liste verwenden oder erstellen möchten, die wir verwenden müssen ng-wiederholen die für jedes in einer Liste enthaltene Element ein Element erstellt, mit dem wir eine Liste von Produkten übergeben und einfach eine Tabelle generieren können.
Nehmen wir an, wir erstellen eine Liste von Schülern für eine Schule, der Schlüssel besteht darin, die Liste zu erstellen, normalerweise würden wir sie von einigen bekommen Internetservice die eine Datenbank konsultiert, aber der Einfachheit halber werden wir selbst eine Liste erstellen, dann nennen wir diese Liste in unserem $ Umfang um es verwenden zu können, mit ihm innerhalb der HTML wir können die anleitung einbauen ng-wiederholen die wir erwähnt hatten, sehen wir uns den folgenden Code an:

 var Studenten = [{Name: 'María Rojo', ID: '1'}, {Name: 'Manolo Rodriguez', ID: '2'}, {Name: 'Joao Pinto', ID: '3'}]; Funktion StudentListController ($-Bereich) {$-Bereich.students = Studenten; } 

Hier haben wir die Liste der Schüler definiert und dann definieren wir den Controller, mit dem wir diese Liste an die $ Umfang des Regler, jetzt müssen wir den Code schreiben HTML:

 
 
 {{Name des Studenten}}

Hier sehen wir, dass wir unsere Liste als Controller von . definieren AngularJS und damit die $ Umfang des genannten Controllers ermöglicht uns den Zugriff auf die Schülerliste, dann verwenden wir ng-wiederholen Sie sagen Ihnen, dass Sie für jedes Element der Schülerliste und schließlich innerhalb der Schülerliste einen Schüler erstellen werden

Wir erstellen einen Anker, der uns an eine andere Stelle innerhalb der Anwendung führt. Sehen wir uns das folgende Bild an, wie dies in unserem Browser aussieht:

Spleiß()-FunktionWir können auch neue Elemente in die Liste aufnehmen, dafür haben wir die Funktion spleiß ()Wenn wir es beispielsweise in eine Schaltfläche integrieren, die neue Schüler hinzufügt, sehen wir die Änderung automatisch, da AngularJS Es gibt uns einen Hauch von Erfrischung in Echtzeit des Dokuments, ohne die Seite neu laden zu müssen.
Sehen wir uns im folgenden Code an, wie der Controller aussehen würde, um einen Schüler hinzuzufügen:

 var Studenten = [{Name: 'María Rojo', ID: '1'}, {Name: 'Manolo Rodriguez', ID: '2'}, {Name: 'Joao Pinto', ID: '3'}]; Funktion StudentListController ($-Bereich) {$-Bereich.students = Studenten; $ scope.addNew = function () {$ scope.students.splice (1, 0, {name: 'Joaquin Fernandez', id: '4'}); }; } 

Jetzt müssen wir nur noch die neue Funktion in unserem aufrufen HTML, wir können es auf folgende Weise tun:

 {{Name des Studenten}}

Einfügung

Sehen wir uns an, wie das in unserem Browser aussieht:

Wir sehen, wie wir den neuen Schüler zur Liste hinzugefügt haben, aber jedes Mal, wenn wir auf die Schaltfläche klicken, fügen wir dieselbe Person hinzu, weil wir keinen dynamischen Code erstellt haben, aber das ist eine andere Sache, was wir hervorheben müssen, ist das wir mussten füge hinzu ein auf der wir den Verantwortlichen platziert haben, so konnten wir unseren Button in die $ Umfang.
Damit beenden wir dieses Tutorial, da wir den Umgang mit wiederholten Elementen in . sehen AngularJS Es ist recht einfach und gibt uns die Möglichkeit, Listen schnell zu erstellen, wie wir in den Beispielen sehen konnten.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben