Wyrażenia AngularJS

Poprzednia strona Wprowadzenie do AngularJS
Następna strona Moduły AngularJS

AngularJS poprzezWyrażeniePowiąż dane z HTML.

Wyrażenia AngularJS

Wyrażenia AngularJS mogą być zapisywane w podwójnych nawiasach kwadratowych:{{ expression }}.

Wyrażenia AngularJS mogą być również zapisywane w deklaracjach:ng-bind="expression".

AngularJS przeanalizuje wyrażenie i zwróci wynik w miejscu, gdzie pisałeś wyrażenie.

Wyrażenia AngularJSwyglądają podobnie Wyrażenia JavaScript：Mogą zawierać literalne wartości, operatorzy i zmienne.

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

Przykład

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Moje pierwsze wyrażenie: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Spróbuj sam

Jeśli usuniesz ng-app Deklaracje, HTML wyświetli wyrażenie w oryginalnym kształcie, bez jego analizy:

Przykład

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Moje pierwsze wyrażenie: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Spróbuj sam

Możesz pisać wyrażenia w ulubionym miejscu, AngularJS prosto je przeanalizuje i zwróci wynik.

Przykład: Poczekaj, aż AngularJS zmieni wartość atrybutu CSS.

Zmień wartość, aby zmienić kolor poniższego pola tekstowego:

Jasnoniebieski

Przykład

<div ng-app="" ng-init="mojKolor='lightblue'">
<input style="background-color:{{mojKolor}}" ng-model="mojKolor">
</div>

Spróbuj sam

Liczby AngularJS

Liczby AngularJS działają jak liczby JavaScript:

Przykład

<div ng-app="" ng-init="ilość=1;koszt=5">
<p>Całkowita kwota (w dolarach): {{ ilość * koszt }}</p>
</div>

Spróbuj sam

Użycie ng-bind Podobny przykład:

Przykład

<div ng-app="" ng-init="ilość=1;koszt=5">
<p>Całkowita kwota (w dolarach): <span ng-bind="ilość * koszt"></span></p>
</div>

Spróbuj sam

Użycie ng-init jest rzadko spotykane. Dowiesz się o lepszych metodach inicjalizacji danych w rozdziale o kontrolerach.

Ciągi znaków AngularJS

Ciągi znaków AngularJS działają jak ciągi znaków JavaScript:

Przykład

<div ng-app="" ng-init="imie='Bill';nazwisko='Gates'">
<p>Nazwa to {{ imie + " " + nazwisko }}</p>
</div>

Spróbuj sam

Podobny przykład użycia ng-bind:

Przykład

<div ng-app="" ng-init="imie='Bill';nazwisko='Gates'">
<p>Nazwa to <span ng-bind="imie + ' ' + nazwisko"></span></p>
</div>

Spróbuj sam

Obiekty AngularJS

Obiekty AngularJS działają jak obiekty JavaScript:

Przykład

<div ng-app="" ng-init="osoba={imie:'Bill',nazwisko:'Gates'}">
<p>Nazwa to {{ osoba.nazwisko }}</p>
</div>

Spróbuj sam

Podobny przykład użycia ng-bind:

Przykład

<div ng-app="" ng-init="osoba={imie:'Bill',nazwisko:'Gates'}">
<p>Nazwa to <span ng-bind="osoba.nazwisko"></span></p>
</div>

Spróbuj sam

Tablice AngularJS

Tablice AngularJS działają jak tablice JavaScript:

Przykład

<div ng-app="" ng-init="punkty=[1,15,19,2,40]">
<p>Trzeci wynik to {{ punkty[2] }}</p>
</div>

Spróbuj sam

Podobny przykład użycia ng-bind:

Przykład

<div ng-app="" ng-init="punkty=[1,15,19,2,40]">
<p>Trzecim wynikiem jest <span ng-bind="points[2]"></span></p>
</div>

Spróbuj sam