Eventos
O AngularJS fornece vários eventos que podem ser vinculados ao HTML. Por exemplo, ng-click é normalmente vinculado com botões.
- ng-click
- ng-dbl-click
- ng-mousedown
- ng-mouseup
- ng-mouseenter
- ng-mouseleave
- ng-mousemove
- ng-mouseover
- ng-keydown
- ng-keyup
- ng-keypress
- ng-change
ng-click
Limpa os dados de um formulário usando a diretiva onclick em um botão.
<input name = "firstname" type = "text" ng-model = "firstName" required> <input name = "lastname" type = "text" ng-model = "lastName" required> <input name = "email" type = "email" ng-model = "email" required> <button ng-click = "reset()">Reset</button> <script> function studentController($scope) { $scope.reset = function(){ $scope.firstName = "Mahesh"; $scope.lastName = "Parashar"; $scope.email = "MaheshParashar@tutorialspoint.com"; } $scope.reset(); } </script>
ng-dbl-click
Permite especificar o comportamento personalizado em um evento dblclick.
<button ng-dblclick="count = count + 1" ng-init="count=0">
Increment (on double click)
</button>
count: {{count}}ng-mousedown
Permite especificar o comportamento personalizado no evento mousedown. No exemplo, clicando.
<button ng-mousedown="count = count + 1" ng-init="count=0">
Increment (on mouse down)
</button>
count: {{count}}ng-mouseup
Permite especificar o comportamento personalizado no evento mouseup. No exemplo, clicando.
<button ng-mouseup="count = count + 1" ng-init="count=0">
Increment (on mouse up)
</button>
count: {{count}}ng-mouseenter
Permite especificar o comportamento personalizado no evento mouseenter. No exemplo, passando o mouse sobre o botão.
<button ng-mouseenter="count = count + 1" ng-init="count=0">
Increment (when mouse enters)
</button>
count: {{count}}ng-mouseleave
Permite especificar o comportamento personalizado no evento mouseleave. No exemplo, bote o mouse sobre o botão e depois tire.
<button ng-mouseleave="count = count + 1" ng-init="count=0">
Increment (when mouse leaves)
</button>
count: {{count}}
ng-mousemove
Permite especificar o comportamento personalizado no evento mousemove. No exemplo, enquanto o mouse se move sobre o botão o contador é incrementado.
<button ng-mousemove="count = count + 1" ng-init="count=0">
Increment (when mouse moves)
</button>
count: {{count}}ng-mouseover
Permite especificar o comportamento personalizado no evento mouseover. No exemplo, bote o mouse sobre o botão e o contador será incrementado.
<button ng-mouseover="count = count + 1" ng-init="count=0">
Increment (when mouse is over)
</button>
count: {{count}}ng-keydown
Faz a contagem da quantidade de caracteres na caixa de texto.
<input ng-keydown="count = count + 1" ng-init="count=0">
key down count: {{count}}ng-keyup
Faz a contagem da quantidade de caracteres na caixa de texto e na outra caixa mostra o código do caractere digitado.
<p>Typing in the input box below updates the key count</p>
<input ng-keyup="count = count + 1" ng-init="count=0"> key up count: {{count}}
<p>Typing in the input box below updates the keycode</p>
<input ng-keyup="event=$event">
<p>event keyCode: {{ event.keyCode }}</p>
<p>event altKey: {{ event.altKey }}</p>ng-keypress
Faz a contagem da quantidade de caracteres na caixa de texto. Mesmo apagando o contador é incrementado.
<input ng-keypress="count = count + 1" ng-init="count=0">
key press count: {{count}}ng-change
Avaliar a expressão dada quando o usuário altera a entrada. A expressão é avaliada imediatamente, ao contrário do evento onchange do JavaScript que só age no final de uma alteração (normalmente, quando o utilizador deixa o elemento de forma ou pressiona a tecla de retorno).
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function() {
$scope.counter++;
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
<input type="checkbox" ng-model="confirmed" id="ng-change-example2" />
<label for="ng-change-example2">Confirmed</label><br />
<tt>debug = {{confirmed}}</tt><br/>
<tt>counter = {{counter}}</tt><br/>
</div>Validate Data
$dirt- confirma que o valor foi alterado.
$invalid - confirma que o valor digitado é inválido.
$error - confirma o erro exato.
