AngularJS-Ausdrücke: Arrays, Objekte, $eval, Strings

By: James Hartmann James Hartmann
Hours Aktualisiert

⚡ Intelligente Zusammenfassung

AngularJS-Ausdrücke sind Codefragmente in doppelten geschweiften Klammern, die Daten direkt in eine Vorlage einbinden. Sie werten Zahlen, Zeichenketten, Objekte und Arrays aus, und die Funktion `$eval` führt dieselbe Auswertung innerhalb eines Controllers durch.

  • 🧩 Bindungssyntax: Double Geschweifte Klammern erzeugen an der Stelle des Ausdrucks einen Wert und liefern somit das gleiche Ergebnis wie die ng-bind-Direktive.
  • 🔢 Unterstützte Typen: Numbers, Zeichenketten, JavaSkriptobjekte, auf die mit der Punktnotation zugegriffen wird, und Arrays, auf die über den Index zugegriffen wird, werden alle korrekt ausgewertet.
  • 🏷️ Inline-Variablen: Die ng-init-Direktive deklariert Variablen auf Ansichtsebene, die dann von Ausdrücken ohne Controller gelesen werden können.
  • 🛡️ Nachsichtige Bewertung: Undefinierte Eigenschaften liefern undefinierte Ergebnisse anstatt einen einfachen ReferenceError auszulösen. JavaDas Skript würde eine Ausnahme auslösen.
  • 🚫 Harte Grenzen: Schleifen, Ausnahmen, Funktionsdeklarationen, reguläre Ausdrücke sowie die Komma- und void-Operatoren sind nicht verfügbar.
  • ⚙️ Controller-Evaluierung: $scope.$eval wertet eine Ausdruckszeichenkette im Controller-Code aus und stellt das Ergebnis der Ansicht zur Verfügung.
  • ⚠️ Support-Status: AngularJS hat am 31. Dezember 2021 das Ende seines Lebenszyklus erreicht und erhält keine weiteren Sicherheitsupdates mehr.
MEHR LESEN

AngularJS-Ausdrücke

Was sind AngularJS-Ausdrücke?

Ausdrücke sind Variablen, die in doppelten geschweiften Klammern geschrieben werden. {{ }}Sie werden sehr häufig in AngularJS verwendet und kommen in den vorherigen Tutorials dieser Reihe immer wieder vor.

⚠️ Supporthinweis: AngularJS hat erreicht Lebensende am 31. Dezember 2021 und erhält keine weiteren Patches oder Sicherheitskorrekturen. Die unten stehende Syntax ist weiterhin für die Wartung bestehender AngularJS 1.x-Anwendungen gültig; neue Projekte sollten die moderne Syntax verwenden. Angular, wo Interpolationsklammern noch vorhanden sind, aber ng-init und $eval unterlassen Sie.

Erläutern Sie AngularJS-Ausdrücke anhand eines Beispiels

AngularJS-Ausdrücke werden in doppelten geschweiften Klammern geschrieben, wie in {{expression}}.

Syntax: Ein einfaches Beispiel für einen Ausdruck ist {{5 + 6}}.

AngularJS-Ausdrücke binden Daten an HTML auf die gleiche Weise wie die ng-bind-Direktive, und AngularJS zeigt die Daten genau dort an, wo der Ausdruck platziert ist.

In diesem Beispiel zeigen wir eine einfache Addition von Zahlen als Ausdruck.

AngularJS-Ausdrücke

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code Erläuterung:

  1. Die ng-app-Direktive ist leer, was bedeutet, dass kein Modul Controller bereitstellt. Richtlinienoder Dienste für diese Seite.
  2. Ein einfacher Ausdruck addiert zwei Zahlen.

Ausgang:

AngularJS-Ausdrücke

Die Addition von 9 und 6 findet statt und das Ergebnis, 15, wird angezeigt.

AngularJS Numbers

Ausdrücke arbeiten mit Zahlen. Dieses Beispiel multipliziert zwei Zahlenvariablen. margin und profitund zeigt das Produkt an.

AngularJS Numbers

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code Erläuterung:

  1. Die ng-init-Direktive definiert Variablen und ihre Werte direkt in der Ansicht, ähnlich wie lokale Variablen in einer beliebigen Sprache. Programmiersprache. Hier margin und profit werden deklariert und zugewiesen.
  2. Der Ausdruck multipliziert dann diese beiden lokalen Variablen.

Ausgang:

AngularJS Numbers

Es wird die Multiplikation von 2 und 200 durchgeführt und das Produkt 400 wird angezeigt.

AngularJS-Strings

Ausdrücke funktionieren auch mit Zeichenketten. Dieses Beispiel definiert firstName und lastName und zeigt beides an.

AngularJS-Strings

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code Erläuterung:

  1. Die ng-init-Direktive definiert firstName mit dem Wert „Guru" und lastName mit dem Wert „99“.
  2. Die Ausdrücke {{firstName}} und {{lastName}} Lies diese Variablen und zeige sie in der Ansicht an.

Ausgang:

AngularJS-Strings

Beide Werte werden auf dem Bildschirm angezeigt.

ÄHNLICHE ARTIKEL

AngularJS-Objekte

Ausdrücke funktionieren mit JavaSkript Objekte, die aus Name-Wert-Paaren bestehen. Die Syntax eines JavaDas Skriptobjekt sieht folgendermaßen aus:

var car = {type: "Ford", model: "Explorer", color: "White"};

Dieses Beispiel definiert eine person Objekt, das zwei Schlüssel-Wert-Paare enthält, firstName und lastName.

AngularJS-Objekte

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code Erläuterung:

  1. Die ng-init-Direktive definiert das Objekt person mit den Schlüssel-Wert-Paaren firstName einstellen "Guru" und lastName auf „99“ einstellen.
  2. Die Ausdrücke {{person.firstName}} und {{person.lastName}} Lesen Sie diese Elemente. Da sie zu dem Objekt gehören, ist die Punktnotation erforderlich, um ihre Werte zu ermitteln.

Ausgang:

AngularJS-Objekte

Die Werte von firstName und lastName auf dem Bildschirm erscheinen.

AngularJS-Arrays

Ausdrücke funktionieren mit Arrays. Dieses Beispiel definiert ein Array, das die Noten eines Schülers in drei Fächern enthält, und zeigt jeden Wert an.

AngularJS-Arrays

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code Erläuterung:

  1. Die ng-init-Direktive definiert das Array marks mit den drei Werten 1, 15 und 19.
  2. Ausdrücke der Form marks[index] Lies jedes Element.

Ausgang:

AngularJS-Arrays

Die im Array definierten Markierungen werden angezeigt.

Funktionen und Einschränkungen des AngularJS-Ausdrucks

Kompetenzen

  1. AngularJS-Ausdrücke ähneln JavaSkriptausdrücke und weisen eine ähnliche Leistungsfähigkeit und Flexibilität auf.
  2. COHO Expo bei der JavaWenn das Skript einen ReferenceError oder TypeError für eine undefinierte Eigenschaft auslöst, ist die Auswertung von AngularJS tolerant und liefert undefiniert oder null.
  3. Filter können innerhalb eines Ausdrucks angewendet werden, um Daten vor der Anzeige zu formatieren.
  4. Der ternäre Operator wird unterstützt, daher {{ isReady ? 'Yes' : 'No' }} ist gültig.

Einschränkungen

  1. Schleifen und Ausnahmebehandlung können nicht innerhalb eines AngularJS-Ausdrucks verwendet werden. Bedingte Logik ist auf den ternären Operator beschränkt; if Es liegen keine Kontoauszüge vor.
  2. Funktionen können nicht in einem Ausdruck deklariert werden, nicht einmal innerhalb einer ng-init-Direktive.
  3. Reguläre Ausdrücke können nicht innerhalb eines regulären Ausdrucks erstellt werden. Ein regulärer Ausdruck ist eine Kombination aus Symbolen und Zeichen, die zum Abgleich von Zeichenketten verwendet wird, wie zum Beispiel: .*\.txt$und solche Literalformen werden abgelehnt.
  4. Der Kommaoperator (,) und das void Bediener sind nicht zugelassen.

ng-bind vs. Ausdrucksklammern: Welche Methode ist die richtige?

Double Geschweifte Klammern und die ng-bind-Direktive erzeugen die gleiche Ausgabe, daher erscheint die Wahl willkürlich. Das ist sie aber nicht. Beide verhalten sich unterschiedlich, solange AngularJS noch nicht vollständig geladen ist, und dieser Unterschied ist für den Seitennutzer sichtbar.

Aspekt {{ expression }} ng-bind
Geschrieben in Elementinhalt Ein Elementattribut
Bevor AngularJS geladen wird Rohklammern blinken auf dem Bildschirm auf. Es wird nichts angezeigt
Ablesbarkeit Höher – der Wert liegt im Rahmen Niedriger – der Wert ist in einem Attribut verborgen.
Mehrere Werte pro Element Ja Nein, nur eine Bindung
Einmalige Bindung Ja mit {{::value}} Ja mit ng-bind="::value"

Das kurzzeitige Auftreten von geschweiften Klammern wird als „Aufblitzen nicht interpolierten Inhalts“ bezeichnet und entsteht, weil der Browser das Markup rendert, bevor AngularJS es kompiliert. Verwenden Sie `ng-bind` oder fügen Sie die Direktive `ng-cloak` hinzu, um Inhalte oberhalb der Falz anzuzeigen. Geschweifte Klammern sind ansonsten die übersichtlichere und besser lesbare Wahl, insbesondere wenn mehrere Werte innerhalb eines Elements vorkommen.

Unterschied zwischen Ausdruck und $eval

Das $eval Die Funktion wertet Ausdrücke innerhalb des Controllers aus. Ausdrücke werden in der Ansicht ausgewertet, während $eval wird im Controller-Code ausgewertet.

Dieses Beispiel verwendet $eval Um zwei Zahlen zu addieren und das Ergebnis im Scope-Objekt zu platzieren, damit die Ansicht es anzeigen kann.

Unterschied zwischen Ausdruck und $eval

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code Erläuterung:

  1. Zwei Bereichsvariablen, a und bjeweils den Wert 1 enthalten.
  2. $scope.$eval wertet ihre Addition aus und weist das Ergebnis der Bereichsvariablen zu. value.
  3. Die Ansicht zeigt dann Folgendes an value.

Ausgang:

Unterschied zwischen Ausdruck und $eval

Die Ausgabe zeigt den innerhalb des Ausdrucks ausgewerteten Ausdruck. Controller, wobei die Summe der beiden Bereichsvariablen an die Ansicht gesendet und dort angezeigt wird.

Häufig gestellte Fragen

Einem Ausdruck zwei Doppelpunkte voranstellen, wie in {{::name}}Die Überwachung wird eingestellt, sobald ein Wert aufgelöst wurde. Dadurch wird der Watcher entfernt und die Digest-Kosten auf Seiten mit vielen statischen Bindungen gesenkt.

$eval wertet eine Zeichenkette sofort gegen eine aus kann. $parse Gibt eine wiederverwendbare Funktion zur wiederholten Auswertung zurück. $interpolate Verarbeitet eine ganze Vorlagenzeichenkette, die geschweifte Klammern enthält, anstatt eines einzelnen Ausdrucks.

Meist. AI Tools behalten die geschweiften Klammern bei und schreiben Filter als Pipes um, aber ng-init-Variablen haben kein Angular-Äquivalent und müssen manuell in eine Komponentenklasse verschoben werden.

KI-Tools scannen Vorlagen nach Funktionsaufrufen innerhalb von Bindungen, die bei jedem Digest-Zyklus erneut ausgeführt werden, und schlagen entweder vor, das Ergebnis im Gültigkeitsbereich zwischenzuspeichern oder auf eine einmalige Bindung umzuschalten.

Die Auswertung von AngularJS ist bewusst fehlertolerant. Fehlende Eigenschaften führen zu `undefined`, was als leerer String dargestellt wird. Ein leerer Wert deutet daher in der Regel auf einen Tippfehler im Eigenschaftspfad hin und nicht auf einen Laufzeitfehler.

Fassen Sie diesen Beitrag mit folgenden Worten zusammen: