angleJSでのイベント処理
ディレクティブを介したangularJSでのイベントの処理方法
純粋なjavascriptまたはjqueryを使用すると、クリック、ホバー、フォーム送信、タグ変更イベントのキャッチなど、DOMとやり取りすることがよくあります。angularJSは、これらの問題の処理に役立つより簡潔なソリューションを提供します。 angleJSでのイベント処理のためのいくつかのディレクティブ：
- ng-クリック
- ng-dbl-クリック
- ng-keydown
- ng-keyup
- ng-mousedown
- ng-mouseenter
- ng-mouseleave
- ng-change
- ng-送信
- ..。
ここで他のドキュメントを参照してください： https ：//docs.angularjs.org/api/ng/directive/
イベントをキャッチするタグにイベント処理ディレクティブを配置し、使用する関数を定義するだけです。以下の例を参照してください。
<!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>この例では、calculate（）関数を呼び出すng-clickディレクティブを介してユーザーのクリックイベントを処理します。スクリプトレイヤーの下で、必要な意図に従ってロジックを計算および処理するメソッド（メソッド/関数）を定義します。残りのイベントについても同じことが言えます。
次の例を考えてみましょう。
<!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>コードを実行したときの結果：
上記の例では、データバインディングと変更イベントを組み合わせた場合の解決策が示されています。コードは非常にクリーンで短く、データはリアルタイムで更新されます。
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
