Wyrażenia AngularJS
AngularJS wiąże dane z HTML za pomocą wyrażeń .
Wyrażenia AngularJS
Wyrażenia AngularJS można pisać w podwójnych nawiasach klamrowych: .{{ expression }}
Wyrażenia AngularJS można również pisać wewnątrz dyrektywy: .ng-bind="expression"
AngularJS rozwiąże wyrażenie i zwróci wynik dokładnie w miejscu, w którym zostało zapisane.
Wyrażenia AngularJS są bardzo podobne do wyrażeń JavaScript: mogą zawierać literały, operatory i zmienne.
Przykład {{ 5 + 5 }} lub {{ imię + „ ” + nazwisko }}
Przykład
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Jeśli usuniesz ng-appdyrektywę, HTML wyświetli wyrażenie w takim stanie, w jakim jest, bez rozwiązywania go:
Przykład
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Możesz pisać wyrażenia gdziekolwiek chcesz, AngularJS po prostu rozwiąże wyrażenie i zwróci wynik.
Przykład: Niech AngularJS zmieni wartość właściwości CSS.
Zmień kolor pola wprowadzania poniżej, zmieniając jego wartość:
Przykład
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
Liczby AngularJS
Liczby AngularJS są jak liczby JavaScript:
Przykład
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Ten sam przykład przy użyciu ng-bind:
Przykład
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
Używanie ng-initnie jest zbyt powszechne. Lepszego sposobu inicjalizacji danych dowiesz się z rozdziału o kontrolerach.
Ciągi AngularJS
Ciągi AngularJS są jak ciągi JavaScript:
Przykład
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Ten sam przykład przy użyciu ng-bind:
Przykład
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Obiekty AngularJS
Obiekty AngularJS są jak obiekty JavaScript:
Przykład
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Ten sam przykład przy użyciu ng-bind:
Przykład
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Tablice AngularJS
Tablice AngularJS są jak tablice JavaScript:
Przykład
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Ten sam przykład przy użyciu ng-bind:
Przykład
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Wyrażenia AngularJS a wyrażenia JavaScript
Podobnie jak wyrażenia JavaScript, wyrażenia AngularJS mogą zawierać literały, operatory i zmienne.
W przeciwieństwie do wyrażeń JavaScript, wyrażenia AngularJS można pisać wewnątrz HTML.
Wyrażenia AngularJS nie obsługują warunków, pętli i wyjątków, podczas gdy wyrażenia JavaScript to robią.
Wyrażenia AngularJS obsługują filtry, a wyrażenia JavaScript nie.
Dowiedz się więcej o JavaScript w naszym samouczku JavaScript .