Ereignisbehandlung in AngularJS
-Direktive behandelt werden
Mit reinem Javascript oder jquery interagieren wir oft mit dem DOM, wie z. B. das Fangen von Klicks, Schweben, Formularabsenden, Tag-Änderungsereignissen. AngularJS bietet uns eine präzisere Lösung, um uns bei der Bewältigung dieser Probleme zu helfen. Einige Anweisungen für die Ereignisbehandlung in angleJS:
- ng-Klick
- ng-dbl-klick
- ng-Taste gedrückt
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-Mausblatt
- ng-Änderung
- ng-einreichen
- …
Weitere Dokumente finden Sie hier: https://docs.angularjs.org/api/ng/directive/
Wir müssen lediglich die Direktive zur Ereignisbehandlung in das Tag einfügen, das das Ereignis abfangen soll, und die zu verwendende Funktion definieren. Siehe das Beispiel unten:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hello world angular</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> </head> <body> <div ng-app="calculateApp" ng-controller="calculateController"> <label>Quantity:</label> <input type="number" min="1" max="10" ng-model="qty" /> <label>Price</label> <input type="number" min="0" max="5000" ng-model="price" /> <div>Total: {{total | currency: '$ '}}</div> <button ng-click="calculate()">Calculate</button> </div> <script> var app = angular.module('calculateApp', []); app.controller('calculateController',function($scope){ $scope.qty = 0; $scope.price = 0; $scope.total = 0; $scope.calculate = function(){ this.total = this.qty * this.price; } }); </script> </body> </html>In diesem Beispiel verarbeiten wir das Klickereignis des Benutzers über die Direktive ng-click , die die Funktion compute() aufruft. Definieren Sie unter der Skriptebene die Methode (Methode/Funktion), berechnen Sie die Logik und handhaben Sie sie gemäß der gewünschten Absicht. Dasselbe gilt für die restlichen Veranstaltungen.
Betrachten Sie das folgende Beispiel:
<!DOCTYPE html> <html lang="en" ng-app="exampleviewApp"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Example View AngularJS</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> </head> <body ng-controller="mainController"> <h2>Hello {{name}}</h2> <input type="text" ng-model="name" ng-change="change()" /> {{length}} </body> <script> var exampleviewApp = angular.module('exampleviewApp', []); exampleviewApp.controller('mainController', function($scope) { $scope.name = ''; $scope.length = 0; $scope.change = function(){ $scope.length = $scope.name.length; } }); </script> </html>Ergebnis beim Ausführen des Codes:
Im obigen Beispiel sehen wir die Lösung, wenn wir die Datenbindung mit dem Änderungsereignis kombinieren, der Code sehr sauber und kurz ist und die Daten in Echtzeit aktualisiert werden.
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
