Eventos AngularJS: ng-click, ng-show, ng-hide (exemplo)

Índice:

Anonim

Ao criar aplicativos baseados na web, mais cedo ou mais tarde seu aplicativo precisará lidar com eventos DOM como cliques do mouse, movimentos, pressionamentos de teclado, eventos de mudança, etc.

O AngularJS pode adicionar funcionalidade que pode ser usada para lidar com tais eventos.

Por exemplo, se houver um botão na página e você quiser processar algo quando o botão for clicado, podemos usar a diretiva de evento ng-click.

Examinaremos as diretivas de eventos em detalhes durante este curso.

Neste tutorial, você aprenderá-

  • O que é a diretiva ng-click?
  • O que é a diretiva ng-show?
  • O que é a diretiva ng-hide?

O que é a diretiva ng-click?

A "diretiva ng-click" é usada para aplicar um comportamento personalizado quando um elemento em HTML é clicado. Isso é normalmente usado para botões porque é o local mais comum para adicionar eventos que respondem a cliques realizados pelo usuário

Vejamos um exemplo simples de como podemos implementar o evento click.

Neste exemplo, teremos uma variável de contador que aumentará de valor quando o usuário clicar em um botão.

Event Registration

Guru99 Global Event


The Current Count is {{count}}

Explicação do código:

  1. Primeiro, estamos usando a diretiva ng-init para definir o valor de uma contagem de variável local como 0.
  2. Em seguida, estamos introduzindo a diretiva de evento ng-click no botão. Nesta diretiva, estamos escrevendo código para incrementar o valor da variável de contagem em 1.
  3. Aqui estamos exibindo o valor da variável de contagem para o usuário.

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 acima,

  • Podemos ver que o botão "Incrementar" é exibido e o valor da variável de contagem é inicialmente zero.
  • Quando você clica no botão Incrementar, o valor da contagem é incrementado de acordo, conforme mostrado na imagem de saída abaixo.

O que é a diretiva ng-show?

A diretiva ng-Show é usada para mostrar ou ocultar um determinado elemento HTML com base na expressão fornecida ao atributo ngShow. No plano de fundo, o elemento é mostrado ou oculto removendo ou adicionando a classe CSS .ng-hide ao elemento.

No plano de fundo, o elemento é mostrado ou oculto removendo ou adicionando a classe CSS .ng-hide ao elemento.

Vejamos um exemplo de como podemos usar a diretiva "evento ngshow" para exibir um elemento oculto.

Event Registration

Guru99 Global Event




Angular

Explicação do código:

  1. Estamos anexando a diretiva de evento ng-click ao elemento de botão. Aqui estamos nos referindo a uma função chamada "ShowHide" que é definida em nosso controlador - DemoController.
  2. Estamos anexando o atributo ng-show a uma tag div que contém o texto Angular. Esta é a tag que vamos mostrar / ocultar com base no atributo ng-show.

  3. No controlador, estamos anexando a variável de membro "IsVisible" ao objeto de escopo. Este atributo será passado para o atributo angular ng-show (etapa 2) para controlar a visibilidade do controle div. Inicialmente, estamos definindo isso como falso para que, quando a página for exibida pela primeira vez, a tag div fique oculta.

    Nota: - Quando os atributos ng-show são configurados para true, o controle subsequente que em nosso caso é a tag div será mostrado ao usuário. Quando o atributo ng-show é definido como falso, o controle será escondido do usuário.

  4. Estamos adicionando código à função ShowHide que definirá a variável de membro IsVisible como true para que a tag div possa ser mostrada ao usuário.

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

Produto: 1

Da saída,

  • Você pode ver inicialmente que a tag div que tem o texto "AngularJS" não é mostrada e isso ocorre porque o objeto de escopo isVisible é inicialmente definido como false, que é posteriormente passado para a diretiva ng-show da tag div.
  • Quando você clica no botão "Mostrar AngularJS", ele altera a variável de membro isVisible para se tornar verdadeira e, portanto, o texto "Angular" se torna visível para o usuário. A saída abaixo será mostrada ao usuário.

A saída agora mostra a tag div com o texto Angular.

O que é a diretiva ng-hide?

Com a diretiva ng-hide, um elemento será oculto se a expressão for TRUE. Se a expressão for FALSE, o elemento será mostrado. No plano de fundo, o elemento é mostrado ou oculto removendo ou adicionando a classe CSS .ng-hide ao elemento.

Por outro lado, com ng-hide, o elemento é oculto se a expressão for verdadeira e será mostrado se for falsa.

Vejamos o exemplo semelhante ao mostrado para ngShow para mostrar como o atributo ngHide pode ser usado.

Event Registration

Guru99 Global Event




Angular

Explicação do código:

  1. Estamos anexando a diretiva de evento ng-click ao elemento de botão. Aqui estamos nos referindo a uma função chamada ShowHide que é definida em nosso controlador - DemoController.
  2. Estamos anexando o atributo ng-hide a uma tag div que contém o texto Angular. Esta é a tag, que vamos mostrar / ocultar com base no atributo ng-show.
  3. No controlador, estamos anexando a variável de membro isVisible ao objeto de escopo. Este atributo será passado para o atributo angular ng-show para controlar a visibilidade do controle div. Inicialmente, estamos definindo isso como falso para que, quando a página for exibida pela primeira vez, a tag div fique oculta.
  4. Estamos adicionando código à função ShowHide que definirá a variável de membro IsVisible como true para que a tag div possa ser mostrada ao usuário.

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,

  • Você pode ver inicialmente que a tag div que tem o texto "AngularJs" é mostrada inicialmente porque o valor da propriedade false é enviado para a diretiva ng-hide.
  • Quando clicamos no botão "Ocultar Angular", o valor da propriedade true será enviado para a diretiva ng-hide. Portanto, a saída abaixo será mostrada, na qual a palavra "Angular" ficará oculta.

Diretivas de Listener de Eventos AngularJS

Você pode adicionar ouvintes de eventos AngularJS a seus elementos HTML usando uma ou mais destas diretivas:

  • ng-blur
  • ng-change
  • ng-click
  • ng-copy
  • ng-cut
  • ng-dblclick
  • ng-focus
  • ng-keydown
  • ng-keypress
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • colar

Resumo

  • As diretivas de eventos são usadas no Angular para adicionar código personalizado para responder a eventos gerados pela intervenção do usuário, como cliques em botões, teclado e mouse, etc.
  • A diretiva de evento mais comum é a diretiva ng-click, que é usada para manipular eventos de clique. O uso mais comum disso é para cliques de botão, em que o código pode ser adicionado para responder a um clique de botão.
  • Os elementos HTML também podem ser ocultados ou mostrados ao usuário de acordo com o uso dos atributos angulares ng-show e ng-hide.