Expresiones de AngularJS
AngularJS enlaza datos a HTML usando Expressions .
Expresiones de AngularJS
Las expresiones de AngularJS se pueden escribir entre llaves dobles: .{{ expression }}
Las expresiones de AngularJS también se pueden escribir dentro de una directiva: .ng-bind="expression"
AngularJS resolverá la expresión y devolverá el resultado exactamente donde está escrita la expresión.
Las expresiones de AngularJS son muy parecidas a las expresiones de JavaScript: pueden contener literales, operadores y variables.
Ejemplo {{ 5 + 5 }} o {{ nombre + " " + apellido }}
Ejemplo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Si elimina la ng-appdirectiva, HTML mostrará la expresión tal cual, sin resolverla:
Ejemplo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Puede escribir expresiones donde quiera, AngularJS simplemente resolverá la expresión y devolverá el resultado.
Ejemplo: Deje que AngularJS cambie el valor de las propiedades de CSS.
Cambie el color del cuadro de entrada a continuación, cambiando su valor:
Ejemplo
<div ng-app="" ng-init="myCol='lightblue'">
<input
style="background-color:{{myCol}}" ng-model="myCol">
</div>
Números de AngularJS
Los números de AngularJS son como los números de JavaScript:
Ejemplo
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
Mismo ejemplo usando ng-bind:
Ejemplo
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>
El uso ng-initno es muy común. Aprenderá una mejor manera de inicializar datos en el capítulo sobre controladores.
Cadenas angulares JS
Las cadenas de AngularJS son como cadenas de JavaScript:
Ejemplo
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
Mismo ejemplo usando ng-bind:
Ejemplo
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>
Objetos AngularJS
Los objetos AngularJS son como objetos JavaScript:
Ejemplo
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Mismo ejemplo usando ng-bind:
Ejemplo
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>
Matrices AngularJS
Las matrices de AngularJS son como matrices de JavaScript:
Ejemplo
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>
Mismo ejemplo usando ng-bind:
Ejemplo
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>
Expresiones de AngularJS frente a expresiones de JavaScript
Al igual que las expresiones de JavaScript, las expresiones de AngularJS pueden contener literales, operadores y variables.
A diferencia de las expresiones de JavaScript, las expresiones de AngularJS se pueden escribir dentro de HTML.
Las expresiones de AngularJS no admiten condicionales, bucles ni excepciones, mientras que las expresiones de JavaScript sí.
Las expresiones de AngularJS admiten filtros, mientras que las expresiones de JavaScript no.
Aprenda sobre JavaScript en nuestro tutorial de JavaScript .