suchen

Heim >Web-Frontend >js-Tutorial >Ausdrücke der grundlegenden Studiennotizen von AngularJS_AngularJS

Ausdrücke der grundlegenden Studiennotizen von AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:59:561132Durchsuche

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der jQuery-Methoden zum Erzielen reibungsloser Sprungeffekte von Ankerpunkten innerhalb der page_jqueryNächster Artikel：Zusammenfassung der jQuery-Methoden zum Erzielen reibungsloser Sprungeffekte von Ankerpunkten innerhalb der page_jquery

In Verbindung stehende Artikel

Mehr sehen