AngularJS Evenementen

AngularJS has its own HTML event directives.

AngularJS Evenementen

You can add AngularJS event listeners to your HTML elements by using one or more of the following directives:

  • 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
  • ng-paste

Event commands allow us to run AngularJS functions on certain user events.

AngularJS-gebeurtenissen vervangen niet HTML-gebeurtenissen, beide gebeurtenissen worden uitgevoerd.

Muisgebeurtenissen

Wanneer de cursor over een element beweegt, vinden de volgende muisgebeurtenissen plaats in deze volgorde:

  • ng-mouseover
  • ng-mouseenter
  • ng-mousemove
  • ng-mouseleave

Of, wanneer een element wordt aangeklikt door de muis, worden de volgende gebeurtenissen in deze volgorde geactiveerd:

  • ng-mousedown
  • ng-mouseup
  • ng-click

Je kunt muisgebeurtenissen toevoegen aan elk HTML-element.

Voorbeeld

De count variabele wordt verhoogd wanneer de muis over het H1-element wordt bewogen:

<div ng-app="myApp" ng-controller="myCtrl">  
<h1 ng-mousemove="count = count + 1">Move the mouse over me!</h1>  
<h2>{{ count }}</h2>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.count = 0;  
});  
</script>

Probeer het zelf

ng-click instructie

ng-click De instructie definieert AngularJS-code die wordt uitgevoerd wanneer een element wordt aangeklikt.

Voorbeeld

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
});
</script>

Probeer het zelf

Je kunt ook een functie aanroepen:

Voorbeeld

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.count = 0;
  $scope.myFunction = function() {
    $scope.count++;
  }
});
</script>

Probeer het zelf

Wissel, waar/niet waar

Als je een deel van de HTML-code wilt weergeven bij het klikken op de knop en deze wilt verbergen bij het opnieuw klikken op de knop, net als een dropdown-menu, laat de knop dan als een schakelaar functioneren:

Klik me

Voorbeeld

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Klik me!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Seafood</div>  
</div>  
</div>  
<script>  
var app = angular.module('myApp', []);  
app.controller('myCtrl', function($scope) {  
  $scope.showMe = false;  
  $scope.myFunc = function() {  
    $scope.showMe = !$scope.showMe;  
  }  
});  
</script>

Probeer het zelf

showMe de variabele begint als een booleaanse waarde false.

myFunc de functie gebruiken via !operatoren, die showMe de variabele worden ingesteld op de tegengestelde waarde van zijn huidige waarde.

$event object

Bij het aanroepen van de functie kan $event Object wordt als parameter doorgegeven.

$event Het object bevat het evenementobject van de browser: }}

Voorbeeld

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Sleep de muis naar hierboven!</h1>
<p>Coördinaten: {{x + ', ' + y}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myFunc = function(myE) {
    $scope.x = myE.clientX;
    $scope.y = myE.clientY;
  }
});
</script>

Probeer het zelf