AngularJS Expressions


Utilisation d'AngularJSExpressionsLier les données au HTML.


}}

Les expressions AngularJS s'écrivent entre doubles accolades :{{ expression }}。

Les expressions AngularJS lient les données au HTML, ce qui estng-bindsimilaire à la façon dont les directives fonctionnent.

AngularJS affichera les données à l'emplacement où l'expression est écrite.

Les expressions AngularJSsont très similaires auxexpressions JavaScript: Elles peuvent contenir des littéraux, des opérateurs et des variables.

Exemple : {{ 5 + 5 }} ou {{ firstName + " " + lastName }}

Exemple AngularJS

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.example.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app=""> <p>Ma première expression : {{ 5 + 5 }}</p> </div> </body> </html>

Essayez-le vous-même »

Nombres AngularJS

Les nombres AngularJS sont semblables aux nombres JavaScript :

Exemple AngularJS

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Prix total : {{ quantity * cost }}</p> </div>

Essayez-le vous-même »

Même exemple avec ng-bind :

Exemple AngularJS

<div ng-app="" ng-init="quantity=1;cost=5"> <p>Prix total :<span ng-bind="quantity * cost"></span></p> </div>

Essayez-le vous-même »

Note L'utilisation deng-initn'est pas très courante. Vous apprendrez une meilleure façon d'initialiser les données dans le chapitre sur les contrôleurs.

Chaînes de caractères AngularJS

Les chaînes de caractères AngularJS sont comme les chaînes de caractères JavaScript :

Exemple AngularJS

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>Nom : {{ firstName + " " + lastName }}</p> </div>

Essayez-le vous-même »

Même exemple avec ng-bind :

Exemple AngularJS

<div ng-app="" ng-init="firstName='John';lastName='Doe'"> <p>Nom :<span ng-bind="firstName + ' ' + lastName"></span></p> </div>

Essayez-le vous-même »


Objets AngularJS

Les objets AngularJS sont comme les objets JavaScript :

Exemple AngularJS

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>Le nom de famille est {{ person.lastName }}</p> </div>

Essayez-le vous-même »

Même exemple avec ng-bind :

Exemple AngularJS

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>Le nom de famille est<span ng-bind="person.lastName"></span></p> </div>

Essayez-le vous-même »


Tableaux AngularJS

Les tableaux AngularJS sont comme les tableaux JavaScript:

Exemple AngularJS

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>La troisième valeur est {{ points</p> </div>

Essayez-le vous-même »

Même exemple avec ng-bind :

Exemple AngularJS

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>La troisième valeur est<span ng-bind="points[2]"></span></p> </div>

Essayez-le vous-même »

Expressions AngularJS et expressions JavaScript

Comme les expressions JavaScript, les expressions AngularJS peuvent contenir des lettres, des opérateurs et des variables.

Contrairement aux expressions JavaScript, les expressions AngularJS peuvent être écrites en HTML.

Contrairement aux expressions JavaScript, les expressions AngularJS ne prennent pas en charge les instructions conditionnelles, les boucles ou les exceptions.

Contrairement aux expressions JavaScript, les expressions AngularJS prennent en charge les filtres.

Autres extensions