Expressões AngularJS: ARRAY, Objects, $ eval, Strings (exemplos)

Índice:

Anonim

O que são expressões Angular JS?

Expressões são variáveis ​​que foram definidas entre colchetes {{}}. Eles são muito comumente usados ​​no Angular JS e você os veria em nossos tutoriais anteriores.

Neste tutorial, você aprenderá-

  • Explicar expressões Angular.js com exemplo
  • Números AngularJS
  • Strings AngularJS
  • Objetos AngularJS
  • Matrizes AngularJS
  • Recursos e limitações de expressão do AngularJS
  • A diferença entre expressões e $ eval

Explique as expressões de Angular.js com um exemplo

Expressões AngularJS são aquelas que são escritas entre colchetes {{expression}}.

Sintaxe:

Um exemplo simples de uma expressão é {{5 + 6}}.

Expressões Angular.JS são usadas para vincular dados a HTML da mesma forma que a diretiva ng-bind. AngularJS exibe os dados exatamente no local onde a expressão é colocada.

Vejamos um exemplo de expressões Angular.JS.

Neste exemplo, queremos apenas mostrar uma simples adição de números como uma expressão.

Event Registration

Guru99 Global Event


Addition : {{6+9}}

Explicação do código:

  1. A diretiva ng-app em nosso exemplo está em branco, conforme mostrado na captura de tela acima. Isso significa apenas que não há módulo para atribuir controladores, diretivas, serviços anexados ao código.
  2. Estamos adicionando uma expressão simples que analisa a adição de 2 números.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Da saída,

  • Pode-se observar que a soma dos dois números 9 e 6 ocorre e o valor adicionado de 15 é mostrado.

Números Angular.JS

As expressões também podem ser usadas para trabalhar com números. Vejamos um exemplo de expressões Angular.JS com números.

Neste exemplo, queremos apenas mostrar uma multiplicação simples de 2 variáveis ​​numéricas chamadas margem e lucro e exibir seu valor multiplicado.

Event Registration

Guru99 Global Event


Total profit margin{{margin*profit}}

Explicação do código:

  1. A diretiva ng-init é usada em angular.js para definir variáveis ​​e seus valores correspondentes na própria visualização. É como definir variáveis ​​locais para codificar em qualquer linguagem de programação. Neste caso, estamos definindo 2 variáveis ​​chamadas margem e lucro e atribuindo valores a elas.
  2. Estamos então usando as 2 variáveis ​​locais e multiplicando seus valores.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Da saída,

  • Pode ser visto claramente que a multiplicação dos 2 números 2 e 200 ocorre, e o valor multiplicado de 400 é mostrado.

Strings AngularJS

As expressões também podem ser usadas para trabalhar com strings. Vejamos um exemplo de expressões Angular JS com strings.

Neste exemplo, vamos definir 2 strings de "firstName" e "lastName" e exibi-los usando expressões de acordo.

Event Registration

Guru99 Global Event


   First Name : {{firstName}}
   last Name : {{lastName}}

Explicação do código:

  1. A diretiva ng-init é usada para definir as variáveis ​​firstName com o valor "Guru" e a variável lastName com o valor "99".
  2. Estamos então usando expressões de {{firstName}} e {{lastName}} para acessar o valor dessas variáveis ​​e exibi-las na visualização de acordo.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

A partir da saída, pode ser visto claramente que os valores de firstName e lastName são exibidos na tela.

Objetos Angular.JS

As expressões também podem ser usadas para trabalhar com objetos JavaScript.

Vejamos um exemplo de expressões Angular.JS com objetos javascript. Um objeto javascript consiste em um par nome-valor.

Abaixo está um exemplo da sintaxe de um objeto javascript.

Sintaxe:

var car = {type:"Ford", model:"Explorer", color:"White"};

Neste exemplo, vamos definir um objeto como um objeto pessoa que terá 2 pares de valores-chave de "firstName" e "lastName".

Event Registration

Guru99 Global Event


   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Explicação do código:

  1. A diretiva ng-init é usada para definir o objeto pessoa que, por sua vez, possui pares de valores-chave de firstName com o valor "Guru" e a variável lastName com o valor "99".
  2. Estamos então usando expressões de {{person.firstName}} e {{person.secondName}} para acessar o valor dessas variáveis ​​e exibi-las na visualização de acordo. Uma vez que as variáveis ​​de membro reais são parte do objeto pessoa, elas devem acessá-lo com a notação de ponto (.) Para acessar seu valor real.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

Da saída,

  • Pode-se ver claramente que os valores de "firstName" e "secondName" são exibidos na tela.

Matrizes AngularJS

As expressões também podem ser usadas para trabalhar com matrizes. Vejamos um exemplo de expressões Angular JS com matrizes.

Neste exemplo, vamos definir um array que vai conter as notas de um aluno em 3 disciplinas. Na visualização, exibiremos o valor dessas marcas de acordo.

Event Registration

Guru99 Global Event


Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Explicação do código:

  1. A diretiva ng-init é usada para definir o array com o nome "marks" com 3 valores de 1, 15 e 19.
  2. Em seguida, estamos usando expressões de marcas [índice] para acessar cada elemento da matriz.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

A partir da saída, pode-se ver claramente que as marcas sendo exibidas, que são definidas na matriz.

Recursos e limitações de expressão do AngularJS

Recursos de expressão Angular.JS

  1. Expressões angulares são como expressões JavaScript. Portanto, ele tem o mesmo poder e flexibilidade.
  2. Em JavaScript, quando você tenta avaliar propriedades indefinidas, ele gera um ReferenceError ou TypeError. No Angular, a avaliação da expressão é tolerante e gera um indefinido ou nulo.
  3. Pode-se usar filtros dentro de expressões para formatar dados antes de exibi-los.

Limitações da expressão Angular JS

  1. No momento, não há disponibilidade para usar condicionais, loops ou exceções em uma expressão Angular
  2. Você não pode declarar funções em uma expressão Angular, mesmo dentro da diretiva ng-init.
  3. Não se pode criar expressões regulares em uma expressão angular. Uma expressão regular é uma combinação de símbolos e caracteres, que são usados ​​para localizar strings como. * \. Txt $. Essas expressões não podem ser usadas em expressões Angular JS.
  4. Além disso, não se pode usar ou anular em uma expressão angular.

Diferença entre expressão e $ eval

A função $ eval permite avaliar expressões de dentro do próprio controlador. Portanto, embora as expressões sejam usadas para avaliação na visualização, o $ eval é usado na função do controlador.

Vejamos um exemplo simples disso.

Neste exemplo,

Vamos apenas usar a função $ eval para adicionar 2 números e torná-los disponíveis no objeto de escopo para que possam ser mostrados na visualização.

Event Registration


Guru99 Global Event

{{value}}

Explicação do código:

  1. Estamos primeiro definindo 2 variáveis ​​'a' e 'b', cada uma contendo um valor de 1.
  2. Estamos usando a função $ scope. $ Eval para avaliar a adição das 2 variáveis ​​e atribuí-la à variável de escopo 'valor'.
  3. Estamos então apenas exibindo o valor da variável 'valor' na visualização.

Se o código for executado com êxito, a seguinte saída será exibida quando você executar o código no navegador.

Resultado:

A saída acima mostra a saída da expressão que foi avaliada no controlador. Os resultados acima mostram que a expressão $ eval foi usada para realizar a adição das 2 variáveis ​​de escopo 'aeb' com o resultado enviado e exibido na visualização.

Resumo:

  • Vimos como as expressões em Angular JS podem ser usadas para avaliar expressões regulares como JavaScript, como a simples adição de números.
  • A diretiva ng-init pode ser usada para definir variáveis ​​in-line que podem ser usadas na visualização.
  • As expressões podem funcionar com tipos primitivos, como strings e números.
  • As expressões também podem ser usadas para trabalhar com outros tipos, como objetos e matrizes JavaScript.
  • Expressões em Angular JS têm algumas limitações como, por exemplo, não ter expressões regulares ou usar funções, loops ou instruções condicionais.