Expressions AngularJS

AngularJS utiliseexpressionlier les données au HTML.

Expressions AngularJS

Les expressions AngularJS peuvent être écrites à l'intérieur des doubles accolades :{{ expression }}.

Les expressions AngularJS peuvent également être écrites dans les instructions :ng-bind="expression".

AngularJS解析表达式，并在编写表达式的位置返回结果。

Expressions AngularJSressemblent beaucoup Les expressions JavaScript：Elles peuvent contenir des littéraux, des opérateurs et des variables.

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

Exemple

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Ma première expression : {{ 5 + 5 }}</p>
</div>
</body>
</html>

Essayez-le vous-même

Si vous supprimez ng-app Les instructions, HTML affiche les expressions telles qu'elles sont sans les解析:

Exemple

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Ma première expression : {{ 5 + 5 }}</p>
</div>
</body>
</html>

Essayez-le vous-même

Vous pouvez écrire des expressions dans n'importe quel endroit de votre choix, AngularJS les解析simplement et renvoie les résultats.

Exemple : faire varier la valeur d'une propriété CSS par AngularJS.

Changez la valeur pour modifier la couleur du champ d'entrée ci-dessous :

Bleu clair

Exemple

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

Essayez-le vous-même

Nombres AngularJS

Les nombres AngularJS sont comme les nombres JavaScript :

Exemple

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Montant total (en dollars) : {{ quantity * cost }}</p>
</div>

Essayez-le vous-même

Utilisation ng-bind Même exemple :

Exemple

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Montant total (en dollars) : <span ng-bind="quantity * cost"></span></p>
</div>

Essayez-le vous-même

L'utilisation de ng-init n'est pas courante. Vous apprendrez des méthodes meilleures pour initialiser les données dans le chapitre sur les contrôleurs.

Chaînes AngularJS

Les chaînes AngularJS sont comme les chaînes JavaScript :

Exemple

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Le nom est {{ firstName + " " + lastName }}</p>
</div>

Essayez-le vous-même

Exemple d'utilisation de ng-bind :

Exemple

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>Le nom est <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Essayez-le vous-même

Objets AngularJS

Les objets AngularJS sont comme les objets JavaScript :

Exemple

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Le nom est {{ person.lastName }}</p>
</div>

Essayez-le vous-même

Exemple d'utilisation de ng-bind :

Exemple

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>Le nom 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

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>Le troisième résultat est {{ points[2] }}</p>
</div>

Essayez-le vous-même

Exemple d'utilisation de ng-bind :

Exemple

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

Essayez-le vous-même

Les expressions AngularJS et les expressions JavaScript

Les expressions AngularJS peuvent contenir des littéraux, des opérateurs et des variables, comme les expressions JavaScript.

Contrairement aux expressions JavaScript, les expressions AngularJS peuvent être écrites à l'intérieur de HTML.

Les expressions AngularJS ne supportent pas les instructions conditionnelles, les boucles et les exceptions, tandis que les expressions JavaScript les supportent.

Les expressions AngularJS supportent les filtres, tandis que les expressions JavaScript ne le font pas.

En savoir plus sur JavaScript dans notre tutoriel JavaScript.