AngularJS ng-repeat Direktive mit Beispiel

Inhaltsverzeichnis:

Anonim

Wiederholte Informationen anzeigen

Manchmal müssen wir möglicherweise eine Liste der Elemente in der Ansicht anzeigen. Daher stellt sich die Frage, wie wir eine Liste der in unserem Controller definierten Elemente auf unserer Ansichtsseite anzeigen können.

Angular bietet eine Direktive namens "ng-repeat", mit der sich wiederholende Werte anzeigen lassen, die in unserem Controller definiert sind.

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

Event Registration


Guru99 Global Event




Topics


    

  • {{tpname.name}}
    •

Code Erläuterung:

  1. In der Steuerung definieren wir zuerst unser Array von Listenelementen, die wir in der Ansicht definieren möchten. Hier haben wir ein Array namens "TopicNames" definiert, das drei Elemente enthält. Jedes Element besteht aus einem Name-Wert-Paar.
  2. Das Array von TopicsNames wird dann zu einer Mitgliedsvariablen namens "Themen" hinzugefügt und an unser Bereichsobjekt angehängt.
  3. Wir verwenden die HTML-Tags
      (Ungeordnete Liste) und
    • (Listenelement), um die Liste der Elemente in unserem Array anzuzeigen. Wir verwenden dann die ng-repeat-Direktive, um jedes einzelne Element in unserem Array durchzugehen. Das Wort "tpname" ist eine Variable, die verwendet wird, um auf jedes Element in den Array-Themen zu verweisen. TopicNames.
    • In diesem werden wir den Wert jedes Array-Elements anzeigen.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen. Sie sehen alle Elemente des Arrays (im Grunde die TopicNames in Themen) angezeigt.

Ausgabe:

Angularjs Mehrere Controller

Ein Beispiel für eine erweiterte Steuerung wäre das Konzept, mehrere Steuerungen in einer eckigen JS-Anwendung zu haben.

Möglicherweise möchten Sie mehrere Controller definieren, um verschiedene Geschäftslogikfunktionen zu trennen. Wir haben bereits erwähnt, dass in einem Controller unterschiedliche Methoden vorhanden sind, bei denen eine Methode separate Funktionen zum Addieren und Subtrahieren von Zahlen aufweist. Nun, Sie können mehrere Controller haben, um eine erweiterte Trennung der Logik zu erreichen. Beispielsweise können Sie einen Controller haben, der nur Operationen mit Zahlen ausführt, und den anderen, der Operationen mit Zeichenfolgen ausführt.

Schauen wir uns ein Beispiel an, wie wir mehrere Controller in einer angle.JS-Anwendung definieren können.

Event Registration


Guru99 Global Event


{{lname}}

Code Erläuterung:

  1. Hier definieren wir 2 Controller mit den Namen "firstController" und "secondController". Für jeden Controller fügen wir außerdem Code für die Verarbeitung hinzu. In unserem ersten Controller fügen wir eine Variable namens "pname" mit dem Wert "firstController" hinzu, und im zweiten Controller fügen wir eine Variable namens "lname" mit dem Wert "secondController" hinzu.
  2. In der Ansicht greifen wir auf beide Controller zu und verwenden die Mitgliedsvariable vom zweiten Controller.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen. Sie sehen den gesamten Text von "secondController" wie erwartet.

Ausgabe:

Zusammenfassung

  • Die ng-repeater-Direktive kann verwendet werden, um mehrere sich wiederholende Elemente anzuzeigen.
  • Wir haben uns auch einen erweiterten Controller angesehen, der sich mit der Definition mehrerer Controller in einer Anwendung befasst.