AngularJS-Ausdrücke: ARRAY, Objekte, $ eval, Strings (Beispiele)

Inhaltsverzeichnis:

Anonim

Was sind Angular JS-Ausdrücke?

Ausdrücke sind Variablen, die in doppelten Klammern {{}} definiert wurden. Sie werden sehr häufig in Angular JS verwendet, und Sie würden sie in unseren vorherigen Tutorials sehen.

In diesem Tutorial lernen Sie:

  • Erläutern Sie Angular.js-Ausdrücke anhand eines Beispiels
  • AngularJS-Nummern
  • AngularJS Strings
  • AngularJS-Objekte
  • AngularJS-Arrays
  • AngularJS-Ausdrucksfunktionen und -einschränkungen
  • Der Unterschied zwischen Ausdrücken und $ eval

Erläutern Sie Angular.js-Ausdrücke anhand eines Beispiels

AngularJS-Ausdrücke sind solche, die in doppelte Klammern {{expression}} geschrieben werden.

Syntax:

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

Angular.JS-Ausdrücke werden verwendet, um Daten auf dieselbe Weise wie die ng-bind-Direktive an HTML zu binden. AngularJS zeigt die Daten genau an der Stelle an, an der der Ausdruck platziert ist.

Schauen wir uns ein Beispiel für Angular.JS-Ausdrücke an.

In diesem Beispiel möchten wir nur eine einfache Addition von Zahlen als Ausdruck zeigen.

Event Registration

Guru99 Global Event


Addition : 15

Code Erläuterung:

  1. Die ng-app-Direktive in unserem Beispiel ist leer, wie im obigen Screenshot gezeigt. Dies bedeutet nur, dass es kein Modul zum Zuweisen von Controllern, Anweisungen und Diensten gibt, die an den Code angehängt sind.
  2. Wir fügen einen einfachen Ausdruck hinzu, der die Addition von 2 Zahlen betrachtet.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Aus der Ausgabe,

  • Es ist ersichtlich, dass die Addition der beiden Zahlen 9 und 6 erfolgt und der Mehrwert von 15 angezeigt wird.

Angular.JS-Nummern

Ausdrücke können auch zum Arbeiten mit Zahlen verwendet werden. Schauen wir uns ein Beispiel für Angular.JS-Ausdrücke mit Zahlen an.

In diesem Beispiel möchten wir nur eine einfache Multiplikation von 2 Zahlenvariablen anzeigen, die als Marge und Gewinn bezeichnet werden, und deren multiplizierten Wert anzeigen.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Code Erläuterung:

  1. Die Anweisung ng-init wird in angle.js verwendet, um Variablen und ihre entsprechenden Werte in der Ansicht selbst zu definieren. Es ist so, als würde man lokale Variablen definieren, die in einer beliebigen Programmiersprache codiert werden sollen. In diesem Fall definieren wir zwei Variablen, die als Marge und Gewinn bezeichnet werden, und weisen ihnen Werte zu.
  2. Wir verwenden dann die 2 lokalen Variablen und multiplizieren ihre Werte.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Aus der Ausgabe,

  • Es ist deutlich zu sehen, dass die Multiplikation der 2 Zahlen 2 und 200 stattfindet und der multiplizierte Wert von 400 angezeigt wird.

AngularJS Strings

Ausdrücke können auch zum Arbeiten mit Zeichenfolgen verwendet werden. Schauen wir uns ein Beispiel für Angular JS-Ausdrücke mit Zeichenfolgen an.

In diesem Beispiel definieren wir zwei Zeichenfolgen "Vorname" und "Nachname" und zeigen sie mit entsprechenden Ausdrücken an.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Code Erläuterung:

  1. Mit der Anweisung ng-init werden die Variablen firstName mit dem Wert "Guru" und die Variable lastName mit dem Wert "99" definiert.
  2. Wir verwenden dann die Ausdrücke {{firstName}} und {{lastName}}, um auf den Wert dieser Variablen zuzugreifen und sie in der Ansicht entsprechend anzuzeigen.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Aus der Ausgabe ist deutlich ersichtlich, dass die Werte von Vorname und Nachname auf dem Bildschirm angezeigt werden.

Angular.JS-Objekte

Ausdrücke können auch für die Arbeit mit JavaScript-Objekten verwendet werden.

Schauen wir uns ein Beispiel für Angular.JS-Ausdrücke mit Javascript-Objekten an. Ein Javascript-Objekt besteht aus einem Name-Wert-Paar.

Unten finden Sie ein Beispiel für die Syntax eines Javascript-Objekts.

Syntax:

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

In diesem Beispiel definieren wir ein Objekt als Personenobjekt mit zwei Schlüsselwertpaaren "Vorname" und "Nachname".

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Code Erläuterung:

  1. Die ng-init-Direktive wird verwendet, um die Objektperson zu definieren, die wiederum Schlüsselwertpaare von firstName mit dem Wert "Guru" und der Variablen lastName mit dem Wert "99" hat.
  2. Wir verwenden dann die Ausdrücke {{person.firstName}} und {{person.secondName}}, um auf den Wert dieser Variablen zuzugreifen und sie in der Ansicht entsprechend anzuzeigen. Da die tatsächlichen Elementvariablen Teil der Objektperson sind, müssen sie mit der Punktnotation (.) Darauf zugreifen, um auf ihren tatsächlichen Wert zuzugreifen.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Aus der Ausgabe,

  • Es ist deutlich zu erkennen, dass die Werte "Vorname" und "Nachname" auf dem Bildschirm angezeigt werden.

AngularJS-Arrays

Ausdrücke können auch für die Arbeit mit Arrays verwendet werden. Schauen wir uns ein Beispiel für Angular JS-Ausdrücke mit Arrays an.

In diesem Beispiel definieren wir ein Array, das die Noten eines Schülers in 3 Fächern enthält. In der Ansicht zeigen wir den Wert dieser Marken entsprechend an.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Code Erläuterung:

  1. Die Anweisung ng-init wird verwendet, um das Array mit dem Namen "markiert" mit 3 Werten von 1, 15 und 19 zu definieren.
  2. Wir verwenden dann Ausdrücke von Markierungen [Index], um auf jedes Element des Arrays zuzugreifen.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Aus der Ausgabe ist deutlich ersichtlich, dass die angezeigten Markierungen im Array definiert sind.

AngularJS-Ausdrucksfunktionen und -einschränkungen

Angular.JS-Ausdrucksfunktionen

  1. Winkelausdrücke sind wie JavaScript-Ausdrücke. Daher hat es die gleiche Kraft und Flexibilität.
  2. Wenn Sie in JavaScript versuchen, undefinierte Eigenschaften auszuwerten, wird ein ReferenceError oder TypeError generiert. In Angular verzeiht die Ausdrucksbewertung und generiert eine undefinierte oder Null.
  3. Man kann Filter innerhalb von Ausdrücken verwenden, um Daten zu formatieren, bevor sie angezeigt werden.

Einschränkungen des Winkel-JS-Ausdrucks

  1. Derzeit ist es nicht verfügbar, Bedingungen, Schleifen oder Ausnahmen in einem Winkelausdruck zu verwenden
  2. Sie können keine Funktionen in einem Angular-Ausdruck deklarieren, auch nicht innerhalb der ng-init-Direktive.
  3. In einem Winkelausdruck können keine regulären Ausdrücke erstellt werden. Ein regulärer Ausdruck ist eine Kombination aus Symbolen und Zeichen, die zum Suchen nach Zeichenfolgen wie. * \. Txt $ verwendet werden. Solche Ausdrücke können nicht in Angular JS-Ausdrücken verwendet werden.
  4. Außerdem kann man einen Winkelausdruck nicht verwenden oder ungültig machen.

Unterschied zwischen Ausdruck und $ eval

Mit der Funktion $ eval können Ausdrücke innerhalb des Controllers selbst ausgewertet werden. Während also Ausdrücke für die Auswertung in der Ansicht verwendet werden, wird das $ eval in der Controller-Funktion verwendet.

Schauen wir uns dazu ein einfaches Beispiel an.

In diesem Beispiel ist

Wir werden nur die $ eval-Funktion verwenden, um 2 Zahlen hinzuzufügen und sie im scope-Objekt verfügbar zu machen, damit sie in der Ansicht angezeigt werden können.

Event Registration


Guru99 Global Event

{{value}}

Code Erläuterung:

  1. Wir definieren zuerst 2 Variablen 'a' und 'b', die jeweils den Wert 1 enthalten.
  2. Wir verwenden die Funktion $ scope. $ Eval, um die Addition der beiden Variablen auszuwerten und sie der Bereichsvariablen 'value' zuzuweisen.
  3. Wir zeigen dann nur den Wert der Variablen 'Wert' in der Ansicht an.

Wenn der Code erfolgreich ausgeführt wurde, wird die folgende Ausgabe angezeigt, wenn Sie Ihren Code im Browser ausführen.

Ausgabe:

Die obige Ausgabe zeigt die Ausgabe des Ausdrucks, der in der Steuerung ausgewertet wurde. Die obigen Ergebnisse zeigen, dass der Ausdruck $ eval verwendet wurde, um das Hinzufügen der beiden Bereichsvariablen 'a und b' durchzuführen, wobei das Ergebnis gesendet und in der Ansicht angezeigt wurde.

Zusammenfassung:

  • Wir haben gesehen, wie Ausdrücke in Angular JS verwendet werden können, um reguläre JavaScript-ähnliche Ausdrücke wie das einfache Hinzufügen von Zahlen auszuwerten.
  • Mit der Anweisung ng-init können inline Variablen definiert werden, die in der Ansicht verwendet werden können.
  • Ausdrücke können für primitive Typen wie Zeichenfolgen und Zahlen verwendet werden.
  • Ausdrücke können auch verwendet werden, um mit anderen Typen wie JavaScript-Objekten und Arrays zu arbeiten.
  • Ausdrücke in Angular JS weisen einige Einschränkungen auf, z. B. dass keine regulären Ausdrücke vorhanden sind oder Funktionen, Schleifen oder bedingte Anweisungen verwendet werden.