Espressioni AngularJS

Pagina precedente Introduzione a AngularJS
Pagina successiva Moduli AngularJS

AngularJS tramiteEspressioneLeggi i dati in HTML.

Espressioni AngularJS

Le espressioni AngularJS possono essere scritte all'interno di doppi accodati:{{ expression }}.

Le espressioni AngularJS possono essere scritte anche all'interno delle direttive:ng-bind="expression".

AngularJS analizzerà le espressioni e restituirà i risultati nella posizione in cui si scrivono le espressioni.

Espressioni AngularJSè molto simile a Espressioni JavaScript：Possono contenere letterali, operatori e variabili.

Esempio {{ 5 + 5 }} o {{ firstName + " " + lastName }}

Esempio

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>La mia prima espressione: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Prova tu stesso

Se rimuovi ng-app Le direttive mostrano espressioni come sono, senza analizzarle:

Esempio

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>La mia prima espressione: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Prova tu stesso

Puoi scrivere espressioni in qualsiasi posizione preferita, AngularJS li analizzerà semplicemente e restituirà i risultati.

Esempio: far cambiare AngularJS il valore dell'attributo CSS.

Cambia il colore del campo di input di seguito modificando il suo valore:

Blu chiaro

Esempio

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

Prova tu stesso

Numeri di AngularJS

I numeri di AngularJS sono simili ai numeri di JavaScript:

Esempio

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Importo totale (in dollari)：{{ quantity * cost }}</p>
</div>

Prova tu stesso

Uso ng-bind Esempio simile:

Esempio

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Importo totale (in dollari)：<span ng-bind="quantity * cost"></span></p>
</div>

Prova tu stesso

L'uso di ng-init non è comune. Imparerai migliori metodi di inizializzazione dei dati nel capitolo sui controller.

Stringhe di AngularJS

Le stringhe di AngularJS sono simili alle stringhe di JavaScript:

Esempio

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Il nome è {{ firstName + " " + lastName }}</p>
</div>

Prova tu stesso

Esempio di utilizzo di ng-bind:

Esempio

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Il nome è <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Prova tu stesso

Oggetti di AngularJS

Gli oggetti di AngularJS sono simili agli oggetti di JavaScript:

Esempio

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Il nome è {{ person.lastName }}</p>
</div>

Prova tu stesso

Esempio di utilizzo di ng-bind:

Esempio

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Il nome è <span ng-bind="person.lastName"></span></p>
</div>

Prova tu stesso

Array di AngularJS

Le array di AngularJS sono simili agli array di JavaScript:

Esempio

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Il terzo risultato è {{ points[2] }}</p>
</div>

Prova tu stesso

Esempio di utilizzo di ng-bind:

Esempio

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Il terzo risultato è <span ng-bind="points[2]"></span></p>
</div>

Prova tu stesso