Neueste Web-Entwicklung Tutorials
 

AngularJS Expressions


AngularJS bindet Daten unter Verwendung von Ausdrücken in HTML.


AngularJS Expressions

AngularJS können Ausdrücke in doppelten Klammern geschrieben werden: {{ expression }} .

AngularJS Ausdrücke können auch in einer Richtlinie geschrieben werden: ng-bind=" expression " .

AngularJS den Ausdruck, zu lösen und das Ergebnis genau zurückkehren, wo der Ausdruck geschrieben wird.

AngularJS Ausdrücke ähnlich wie JavaScript Ausdrücke sind: Sie Literale enthalten, Operatoren und Variablen.

Beispiel {{5 + 5}} oder {{firstname + "" + nachName}}

Beispiel

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

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

</body>
</html>
Versuch es selber "

Wenn Sie das Entfernen ng-app - Direktive wird HTML den Ausdruck angezeigt werden, wie es ist, ohne es zu lösen:

Beispiel

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

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

</body>
</html>
Versuch es selber "

Sie können Ausdrücke schreiben, wo immer Sie mögen, AngularJS einfach den Ausdruck zu lösen und das Ergebnis zurück.

Beispiel: Nehmen wir AngularJS ändern Sie den Wert von CSS-Eigenschaften.

Ändern Sie die Farbe des Eingabefeld unten, indem es Wert:

Beispiel

<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

</div>
Versuch es selber "

AngularJS Zahlen

AngularJS Zahlen sind wie JavaScript Zahlen:

Beispiel

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

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

</div>
Versuch es selber "

Dasselbe Beispiel mit ng-bind :

Beispiel

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

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

</div>
Versuch es selber "
Hinweis Mit ng-init ist nicht sehr verbreitet. Sie haben eine bessere Art und Weise zu initialisieren Daten im Kapitel über Steuerungen lernen.

AngularJS Strings

AngularJS Saiten sind wie JavaScript Strings:

Beispiel

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

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

</div>
Versuch es selber "

Dasselbe Beispiel mit ng-bind :

Beispiel

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

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

</div>
Versuch es selber "

AngularJS Objekte

AngularJS Objekte sind wie JavaScript-Objekte:

Beispiel

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

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

</div>
Versuch es selber "

Dasselbe Beispiel mit ng-bind :

Beispiel

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

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

</div>
Versuch es selber "

AngularJS Arrays

AngularJS Arrays sind wie JavaScript-Arrays:

Beispiel

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

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

</div>
Versuch es selber "

Dasselbe Beispiel mit ng-bind :

Beispiel

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

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

</div>
Versuch es selber "

AngularJS Ausdrücke vs. JavaScript Expressions

Wie JavaScript Ausdrücke können AngularJS Ausdrücke enthalten Literale, Operatoren und Variablen.

Im Gegensatz zu JavaScript Ausdrücken können AngularJS Ausdrücke in HTML geschrieben werden.

AngularJS Ausdrücke unterstützen Bedingungen, Schleifen und Ausnahmen nicht, während JavaScript Ausdrücke tun.

AngularJS Ausdrücke unterstützen Filter, während JavaScript Ausdrücke nicht.