Diretivas AngularJS ng-click, ng-show e ng-hide com exemplo
James Hartmann
Eventos AngularJS
Eventos AngularJS são as funcionalidades que permitem que os aplicativos da web interajam com as entradas do usuário, como clique do mouse, entradas do teclado, passagem do mouse, etc. Os eventos precisam ser tratados em aplicativos baseados na web para executar tarefas e ações específicas. É acionado quando uma ação específica é executada pelo usuário.
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 alteração, etc.
AngularJS pode adicionar funcionalidades que podem ser usadas 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 Angular ng-click.
Examinaremos as diretivas de eventos em detalhes durante este curso.
O que é a diretiva ng-click no AngularJS?
O “diretiva ng-click” em AngularJS é usado para aplicar comportamento personalizado quando um elemento em HTML é clicado. Esta diretiva é normalmente usada para botões porque é a mais comum para adicionar eventos que respondem a cliques realizados pelo usuário. Também é usado para exibir alertas quando um botão é clicado.
Sintaxe de ng-click em AngularJS
<element ng-click="expression"> </element>
Vejamos um exemplo simples de como podemos implementar o evento click.
Exemplo de ng-clique em AngularJS
Neste exemplo de ng-click, teremos uma variável de contador que aumentará de valor quando o usuário clicar em um botão.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="">
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<button ng-click="count = count + 1" ng-init="count=0">
Increment
</button>
<div>The Current Count is {{count}}</div>
</body>
</html>
Explicação do código:
- Primeiro, estamos usando a diretiva ng-init para definir o valor de uma variável local count como 0.
- 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 count em 1.
- Aqui estamos exibindo o valor da variável count para o usuário.
Se o código for executado com sucesso, a seguinte saída será mostrada quando você executar o código no navegador.
Saída:
Da saída acima,
- Podemos ver que o botão “Increment” é exibido e o valor da variável count é 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 no AngularJS?
O Diretiva ng-Show em AngularJS é usado para mostrar ou ocultar um determinado HTML elemento baseado na expressão fornecida ao atributo ng-show. Em segundo plano, o elemento HTML é mostrado ou oculto removendo ou adicionando a classe CSS .ng-hide ao elemento. É uma classe CSS predefinida que define a exibição como nenhuma.
Sintaxe de ng-show em AngularJS
<element ng-show="expression"> </element>
No fundo, o elemento é mostrado ou oculto removendo ou adicionando a classe CSS .ng-hide ao elemento.
Exemplo de ng-show em AngularJS
Vejamos um ng-show em Angular. Exemplo de como podemos usar a diretiva “ngshow event” para exibir um elemento oculto.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Show Angular" ng-click="ShowHide()"/>
<br><br><div ng-show = "IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = true;
}
});
</script>
</body>
</html>
Explicação do código:
- Estamos anexando a diretiva de evento ng-click ao elemento botão. Aqui estamos nos referindo a uma função chamada “ShowHide” que é definida em nosso controlador – DemoController.
- 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.
- 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 definidos como true, o controle subsequente que no nosso caso é a tag div será mostrado ao usuário. Quando o atributo ng-show for definido como falso, o controle ficará oculto do usuário.
- Estamos adicionando código à função ShowHide que definirá a variável de membro IsVisible como true para que o AngularJS show hide div na tag de clique possa ser mostrado ao usuário.
Se o código para ng-show e ng-hide em AngularJS for executado com sucesso, a seguinte saída será mostrada quando você executar seu código no navegador.
Saída: 1
Da saída,
- Você pode ver inicialmente que a tag div que contém 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.
- Ao clicar no botão “Mostrar AngularJS”, ele altera a variável do membro isVisible para se tornar verdadeira e, portanto, o texto “Angular” torna-se 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 no AngularJS?
O diretiva ng-hide em AngularJS é uma função na qual um elemento será oculto se a expressão for TRUE. Se a Expressão for FALSE, o elemento será mostrado. No fundo, o elemento é mostrado ou oculto removendo ou adicionando a classe CSS .ng-hide ao elemento.
Sintaxe de ng-hide em AngularJS
<element ng-hide="expression"> </element>
Por outro lado, com ng-hide, o elemento fica oculto se a expressão for verdadeira e será mostrado se for falsa.
Exemplo de ng-hide em AngularJS
Vejamos o exemplo ng-hide semelhante ao mostrado para ngShow para mostrar como os atributos ng-hide e ng-show podem ser usados.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<input type="button" value="Hide Angular" ng-click="ShowHide()"/>
<br><br><div ng-hide="IsVisible">Angular</div>
</div>
<script type="text/javascript">
var app = angular.module('DemoApp',[]);
app.controller('DemoController',function($scope){
$scope.IsVisible = false;
$scope.ShowHide = function(){
$scope.IsVisible = $scope.IsVisible = true;
}
});
</script>
</body>
</html>
Explicação do código:
- Estamos anexando a diretiva de evento ng-click ao elemento botão. Aqui estamos nos referindo a uma função chamada ShowHide que é definida em nosso controlador – DemoController.
- Estamos anexando o atributo ng-hide a uma tag div que contém o texto Angular. Esta é a tag que usaremos para mostrar hide em Angular com base no atributo ng-show.
- 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.
- 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 para ng show hide for executado com sucesso, a seguinte saída será mostrada quando você executar seu código no navegador.
Saída:
Da saída,
- Você pode ver inicialmente que a tag div que contém o texto “AngularJs” é mostrada inicialmente porque o valor da propriedade false é enviado para a diretiva ng-hide.
- Ao clicar no botão “Hide Angular” o valor da propriedade true será enviado para a diretiva ng-hide. Assim será mostrada a saída abaixo, na qual a palavra “Angular” ficará oculta.
Diretivas de ouvinte de eventos AngularJS
Você pode adicionar ouvintes de eventos AngularJS aos seus elementos HTML usando um ou mais destes directivas:
- ng-desfoque
- ng-mudança
- ng-clique
- ng-cópia
- ng-corte
- ng-dblclick
- ng-foco
- ng-keydown
- ng-keypress
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-mouseup
- ng-colar
Resumo
- As diretivas de eventos são usadas em Angular para adicionar código personalizado para responder a eventos gerados pela intervenção do usuário, como cliques de botões, cliques de teclado e mouse, etc.
- A diretiva de evento mais comum é a diretiva AngularJS ng-click, que é usada para lidar com eventos de clique. O uso mais comum disso é para cliques em botões AngluarJS, onde 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 usando o Diretiva AngularJS ng-show, Diretiva Angular ng-hide e atributos ng-visible.
