AngularJS Expresiones

Uso de AngularJSExpresionesEnlaza datos al HTML.

}}

Las expresiones de AngularJS se escriben dentro de dobles llaves:{{ expression }}。

Las expresiones de AngularJS enlazan datos al HTML, lo cual esng-bindmuy similar a las directivas.

AngularJS "genera" los datos en la posición donde se escribe la expresión.

Las expresiones de AngularJSson muy similares alas expresiones de JavaScript.: Pueden contener literales, operadores y variables.

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

Ejemplos de 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>Mi primera expresión: {{ 5 + 5 }}</p> </div> </body> </html>

Pruébalo »

Números de AngularJS

Los números de AngularJS son como los números de JavaScript:

Ejemplos de AngularJS

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

Pruébalo »

El mismo ejemplo con ng-bind:

Ejemplos de AngularJS

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

Pruébalo »

Note Usarlong-initno es muy común. Aprenderá una mejor manera de inicializar datos en el capítulo de controladores.

Cadenas de AngularJS

Las cadenas de AngularJS son como las cadenas de JavaScript:

Ejemplos de AngularJS

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

Pruébalo »

El mismo ejemplo con ng-bind:

Ejemplos de AngularJS

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

Pruébalo »

Objetos de AngularJS

Los objetos de AngularJS son como los objetos de JavaScript:

Ejemplos de AngularJS

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>El apellido es {{ person.lastName }}</p> </div>

Pruébalo »

El mismo ejemplo con ng-bind:

Ejemplos de AngularJS

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"> <p>El apellido es<span ng-bind="person.lastName"></span></p> </div>

Pruébalo »

Arreglos de AngularJS

Los arreglos de AngularJS son como los arreglos de JavaScript:

Ejemplos de AngularJS

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>El tercer valor es {{ points</p> </div>

Pruébalo »

El mismo ejemplo con ng-bind:

Ejemplos de AngularJS

<div ng-app="" ng-init="points=[1,15,19,2,40]"> <p>El tercer valor es<span ng-bind="points[2]"></span></p> </div>

Pruébalo »

Expresiones de AngularJS y Expresiones de JavaScript

Al igual que las expresiones de JavaScript, las expresiones de AngularJS pueden contener letras, operadores y variables.

A diferencia de las expresiones de JavaScript, las expresiones de AngularJS pueden escribirse en HTML.

A diferencia de las expresiones de JavaScript, las expresiones de AngularJS no admiten condiciones, bucles ni excepciones.

A diferencia de las expresiones de JavaScript, las expresiones de AngularJS admiten filtros.

Otras extensiones