Najnowsze tutoriale tworzenie stron internetowych
 

AngularJS Ekspresja


Angularjs wiąże danych do HTML za pomocą wyrażeń.


angularjs Expressions

Angularjs wyrażenia może być napisany wewnątrz podwójnych szelek: {{ expression }} .

Angularjs wyrażenia może być także zapisany wewnątrz dyrektywy: ng-bind=" expression " .

Angularjs rozwiąże ekspresji i zwraca wynik dokładnie, gdzie wyrażenie jest napisane.

Angularjs wyrażenia są podobne wyrażenia javascript: mogą one zawierać literały, operatory i zmienne.

Przykład {{5 + 5}} lub {{firstName + "" + lastName}}

Przykład

<!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>
Spróbuj sam "

Jeśli usuniesz ng-app dyrektywy, HTML spowoduje wyświetlenie wyrażenia jak to jest, nie rozwiązując go:

Przykład

<!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>
Spróbuj sam "

Możesz napisać wyrażeń gdziekolwiek chcesz, angularjs po prostu rozwiązać wyrażenie i zwraca wynik.

Przykład: Załóżmy angularjs zmienić wartość właściwości CSS.

Zmiana koloru polu tekstowym poniżej, zmieniając jego wartość:

Przykład

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

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

</div>
Spróbuj sam "

angularjs Liczby

Angularjs numery są jak numery javascript:

Przykład

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

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

</div>
Spróbuj sam "

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>
Spróbuj sam "
Uwaga Korzystanie ng-init nie jest bardzo powszechne. Dowiesz się lepszy sposób, aby zainicjować danych w rozdziale o kontrolerach.

angularjs Struny

Angularjs ciągi są jak struny javascript:

Przykład

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

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

</div>
Spróbuj sam "

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>
Spróbuj sam "

angularjs Przedmioty

Angularjs obiekty są jak obiekty JavaScript:

Przykład

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

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

</div>
Spróbuj sam "

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>
Spróbuj sam "

angularjs Tablice

Angularjs tablice przypominają tablice javascript:

Przykład

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

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

</div>
Spróbuj sam "

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>
Spróbuj sam "

Angularjs Ekspresja vs. JavaScript Expressions

Jak wyrażeń JavaScript, angularjs wyrażenia mogą zawierać literały, operatory i zmienne.

W przeciwieństwie do wyrażenia JavaScript, angularjs wyrażenia może być napisany wewnątrz HTML.

Angularjs wyrażenia nie obsługują warunkowe, pętle, i wyjątki, natomiast wyrażenia JavaScript robić.

Angularjs wyrażenia wsparcia filtrów, natomiast wyrażenia JavaScript nie.