Ausdrücke der grundlegenden Studiennotizen von AngularJS

Ausdrücke der grundlegenden Studiennotizen von AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:59:56

Original

1103 Leute haben es durchsucht

AngularJS bindet Daten über Ausdrücke an HTML.

AngularJS-Ausdruck

AngularJS-Ausdrücke werden in doppelten Klammern geschrieben: {{ Ausdrucksanweisung }}.

AngularJS-Ausdrücke binden Daten auf die gleiche Weise wie die ng-bind-Direktive an HTML.

AngularJS wird den Ausdruck genau als berechnetes Ergebnis „ausgeben“.

AngularJS-Ausdrücke weisen viele Ähnlichkeiten mit JavaScript-Ausdrücken auf. Beide enthalten Literale, Operatoren und Variablen. Zum Beispiel {{ 5 5 }} und {{ firstName " " lastName }}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

Nach dem Login kopieren

Wenn Sie die ng-app-Direktive entfernen, wird der Ausdruck ohne Auswertung direkt auf der Seite angezeigt.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div>
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Nach dem Login kopieren

AngularJS-Zahlen

AngularJS-Nummern sind die gleichen wie JavaScript-Nummern:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div>

Nach dem Login kopieren

Ebenso können wir die ng-bind-Direktive verwenden, um den gleichen Effekt zu erzielen:

<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Nach dem Login kopieren

Hinweis: Die Verwendung der ng-init-Direktive ist in der AngularJS-Entwicklung sehr verbreitet. Im Abschnitt „Controller“ sehen Sie bessere Möglichkeiten zum Initialisieren von Daten.

AngularJS String

AngularJS-Strings sind die gleichen wie JavaScript-Strings:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div>

Nach dem Login kopieren

Ebenso können wir die ng-bind-Direktive verwenden, um den gleichen Effekt zu erzielen:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

Nach dem Login kopieren

AngularJS-Objekt

AngularJS-Objekte sind die gleichen wie JavaScript-Objekte:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div>

Nach dem Login kopieren

Ebenso können wir die ng-bind-Direktive verwenden, um den gleichen Effekt zu erzielen:

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

Nach dem Login kopieren

AngularJS-Array

AngularJS-Arrays sind die gleichen wie JavaScript-Arrays:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div>

Nach dem Login kopieren

Ebenso können wir die ng-bind-Direktive verwenden, um den gleichen Effekt zu erzielen:

<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

Nach dem Login kopieren

Vergleich von AngularJS-Ausdrücken und JavaScript-Ausdrücken

Wie JavaScript-Ausdrücke enthalten auch AngularJS-Ausdrücke Literale, Operatoren und Variablen. Im Gegensatz zu JavaScript-Ausdrücken

AngularJS-Ausdrücke können in HTML geschrieben werden.
AngularJS-Ausdrücke unterstützen keine Bedingungs- und Schleifenanweisungen und es gibt keine Ausnahmeanweisungen.
AngularJS-Ausdrücke unterstützen Filter.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.