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

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

WBOY

Libérer： 2016-05-16 15:59:56

original

1129 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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.