AngularJS Begivenheder

AngularJS har sine egne HTML-eventinstruktioner.

AngularJS Begivenheder

Du kan tilføje AngularJS-tilsyn til dine HTML-elementer ved hjælp af en eller flere af følgende instruktioner:

• 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 instruktioner tillader os at køre AngularJS-funktioner på visse brugereventer.

AngularJS-Events overskriver ikke HTML-events, begge events udføres.

Museevents

Når markøren flyttes over elementet, vil museevents forekomme i følgende rækkefølge:

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

Eller, når et element klikkes med musen, vil de blive udløst i følgende rækkefølge:

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

Du kan tilføje museevents til ethvert HTML-element.

Eksempel

Øg variablen count, når musen flyttes over H1-elementet:

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

Prøv det selv

ng-click instruktion

ng-click En instruktion definerer AngularJS-koden, der skal udføres, når et element klikkes.

Eksempel

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

Prøv det selv

Du kan også citere en funktion:

Eksempel

<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunction()">Klik mig!</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>

Prøv det selv

Skift, sand/falsk

Hvis du vil vise en del af HTML-koden ved at klikke på knappen og skjule den igen ved at klikke på knappen igen, som en rullemenu, så skal knappen opføre sig som en skifteswitch:

Eksempel

<div ng-app="myApp" ng-controller="myCtrl">  
<button ng-click="myFunc()">Klik mig!</button>  
<div ng-show="showMe">  
  <h1>Menu:</h1>  
  <div>Pizza</div>  
  <div>Pasta</div>  
  <div>Fisk</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>

Prøv det selv

showMe Variablen starter som et boolesk værdi false.

myFunc funktionen ved hjælp af !（ikke）operator, der bruger showMe variablen til det modsatte af dens nuværende værdi.

$event objektet

Man kan bruge funktionen ved at sætte $event Objektet som parameter overføres.

$event Objektet indeholder browserens begivenhedskontrol:

Eksempel

<div ng-app="myApp" ng-controller="myCtrl">
<h1 ng-mousemove="myFunc($event)">Flyt musen hen over mig!</h1>
<p>Koordinater: {{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>

Prøv det selv