AngularJS- Ereignisse
- Vorherige Seite AngularJS-DOM
- Nächste Seite AngularJS- Formulare
AngularJS hat seine eigenen HTML-Ereignisanweisungen.
AngularJS- Ereignisse
Sie können einen oder mehrere dieser Anweisungen verwenden, um AngularJS-Ereignisabhörer zu Ihrem HTML-Element hinzuzufügen:
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-Aufrufe erlauben es uns, AngularJS-Funktionen auf bestimmten Benutzerereignissen auszuführen.
AngularJS-Ereignisse überschreiben keine HTML-Ereignisse, beide Ereignisse werden ausgeführt.
Mausereignisse
Wenn der Cursor auf das Element bewegt wird, treten die Mausereignisse in folgender Reihenfolge auf:
- ng-mouseover
- ng-mouseenter
- ng-mousemove
- ng-mouseleave
Oder, wenn ein Element angeklickt wird, werden die Ereignisse in folgender Reihenfolge ausgelöst:
- ng-mousedown
- ng-mouseup
- ng-click
Du kannst Mausereignisse auf jedem HTML-Element hinzufügen.
Beispiel
Erhöhe die Variable count, wenn der Mauszeiger auf das H1-Element bewegt wird:
<div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-mousemove="count = count + 1">Bewege den Mauszeiger darauf!</h1> <h2>{{ count }}</h2> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script>
ng-click-Anweisung
ng-click
Anweisungen definieren den AngularJS-Code, der beim Klicken auf das Element ausgeführt wird.
Beispiel
<div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="count = count + 1">Klicke mich!</button> <p>{{ count }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.count = 0; }); </script>
Du kannst auch eine Funktion aufrufen:
Beispiel
<div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="myFunction()">Klicke mich!</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>
Umschalten, wahr/falsch
Wenn du willst, dass ein Teil des HTML-Codes beim Klicken auf die Schaltfläche angezeigt wird und beim erneuten Klicken auf die Schaltfläche ausgeblendet wird, wie eine Dropdown-Liste, dann soll die Schaltfläche wie ein Schalter funktionieren:
Klicke michBeispiel
<div ng-app="myApp" ng-controller="myCtrl"> <button ng-click="myFunc()">Klicke mich!</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>
showMe
Die Variable beginnt als boolescher Wert. false
.
myFunc
die Funktion durch Verwendung !
der (nicht-)logische Operator, der showMe
die Variable auf den umgekehrten Wert ihres aktuellen Wertes gesetzt werden.
$event-Objekt
Bei der Aufrufung der Funktion kann $event
Das Objekt wird als Parameter übergeben.
$event
Das Objekt enthält das Ereignisobjekt des Browsers: }}
Beispiel
<div ng-app="myApp" ng-controller="myCtrl"> <h1 ng-mousemove="myFunc($event)">Bewegen Sie den Mauszeiger auf mich!</h1> <p>Koordinaten: {{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>
- Vorherige Seite AngularJS-DOM
- Nächste Seite AngularJS- Formulare