Expressões AngularJS

Página Anterior Introdução ao AngularJS
Próxima Página Módulos AngularJS

O AngularJS usaexpressãopara vincular dados ao HTML.

Expressões AngularJS

As expressões do AngularJS podem ser escritas dentro de chaves duplas:{{ expression }}.

As expressões do AngularJS também podem ser escritas dentro de instruções:ng-bind="expression".

O AngularJS analisará a expressão e retornará o resultado no local onde a expressão está escrita.

Expressões AngularJSparecem Expressões JavaScript：Elas podem conter literais, operadores e variáveis.

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

Exemplo

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>Minha primeira expressão: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Experimente você mesmo

Se você remover ng-app Instruções, o HTML exibirá a expressão sem analisá-la:

Exemplo

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
  <p>Minha primeira expressão: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Experimente você mesmo

Você pode escrever expressões em qualquer local que você gostar, o AngularJS simplesmente analisará a expressão e retornará o resultado.

Exemplo: faça o AngularJS alterar o valor de um atributo CSS.

Altere o valor para mudar a cor da caixa de entrada abaixo:

Azul claro

Exemplo

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

Experimente você mesmo

Números do AngularJS

Os números do AngularJS são como os números do JavaScript:

Exemplo

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Montante total (dólares): {{ quantity * cost }}</p>
</div>

Experimente você mesmo

Uso ng-bind O mesmo exemplo:

Exemplo

<div ng-app="" ng-init="quantity=1;cost=5">
<p>Montante total (dólares): <span ng-bind="quantity * cost"></span></p>
</div>

Experimente você mesmo

O uso do ng-init não é muito comum. Você aprenderá melhor métodos para inicializar dados no capítulo sobre controladores.

Strings do AngularJS

Os strings do AngularJS são como os strings do JavaScript:

Exemplo

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>O nome é {{ firstName + " " + lastName }}</p>
</div>

Experimente você mesmo

Exemplo de uso do ng-bind:

Exemplo

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>O nome é <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

Experimente você mesmo

Objetos do AngularJS

Os objetos do AngularJS são como os objetos do JavaScript:

Exemplo

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>O nome é {{ person.lastName }}</p>
</div>

Experimente você mesmo

Exemplo de uso do ng-bind:

Exemplo

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>O nome é <span ng-bind="person.lastName"></span></p>
</div>

Experimente você mesmo

Arrays do AngularJS

Os arrays do AngularJS são como os arrays do JavaScript:

Exemplo

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>O terceiro resultado é {{ points[2] }}</p>
</div>

Experimente você mesmo

Exemplo de uso do ng-bind:

Exemplo

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>O terceiro resultado é <span ng-bind="points[2]"></span></p>
</div>

Experimente você mesmo