Maison > Article > interface Web > Notes d'étude de base sur les expressions d'AngularJS_AngularJS

Notes d'étude de base sur les expressions d'AngularJS_AngularJS

WBOYoriginal: 2016-05-16 15:59:561082parcourir

AngularJS lie les données au HTML via des expressions.

Expression AngularJS

Les expressions AngularJS sont écrites entre doubles accolades : {{ expression Statement }}.

Les expressions AngularJS lient les données au HTML de la même manière que la directive ng-bind.

AngularJS "affichera" avec précision l'expression comme résultat calculé.

Les expressions AngularJS présentent de nombreuses similitudes avec les expressions JavaScript. Elles contiennent toutes deux des littéraux, des opérateurs et des variables. Par exemple {{ 5 5 }} et {{ firstName " " lastName }}

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div ng-app="">
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

Si vous supprimez la directive ng-app, l'expression sera affichée directement sur la page sans être évaluée.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<div>
   <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>

Numéros AngularJS

Les numéros AngularJS sont les mêmes que les numéros JavaScript :

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

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

</div>

De même, nous pouvons utiliser la directive ng-bind pour obtenir le même effet :

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

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>

Remarque L'utilisation de la directive ng-init est très courante dans le développement AngularJS. Dans la section Contrôleurs, vous découvrirez de meilleures façons d'initialiser les données.

Chaîne AngularJS

Les chaînes AngularJS sont identiques aux chaînes JavaScript :

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

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

</div>

De même, nous pouvons utiliser la directive ng-bind pour obtenir le même effet :

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

<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>

</div>

Objet AngularJS

Les objets AngularJS sont identiques aux objets JavaScript :

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

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

</div>

De même, nous pouvons utiliser la directive ng-bind pour obtenir le même effet :

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

<p>The name is <span ng-bind="person.lastName"></span></p>

</div>

Tableau AngularJS

Les tableaux AngularJS sont identiques aux tableaux JavaScript :

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

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

</div>

De même, nous pouvons utiliser la directive ng-bind pour obtenir le même effet :

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

<p>The third result is <span ng-bind="points[2]"></span></p>

</div>

Comparaison des expressions AngularJS et des expressions JavaScript

Comme les expressions JavaScript, les expressions AngularJS contiennent également des littéraux, des opérateurs et des variables. Contrairement aux expressions JavaScript,

Les expressions AngularJS peuvent être écrites en HTML.
Les expressions AngularJS ne prennent pas en charge les instructions conditionnelles et en boucle, et il n'y a pas d'instructions d'exception.
Les expressions AngularJS prennent en charge les filtres.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé des méthodes de jQuery pour obtenir des effets de saut en douceur des points d'ancrage dans page_jqueryArticle suivant：Résumé des méthodes de jQuery pour obtenir des effets de saut en douceur des points d'ancrage dans page_jquery

Articles Liés

Voir plus