AngularJSイベント

❮ 前次 ❯

AngularJSには独自のHTMLイベントディレクティブがあります。

AngularJSイベント

次のディレクティブの1つ以上を使用して、AngularJSイベントリスナーをHTML要素に追加できます。

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

イベントディレクティブを使用すると、特定のユーザーイベントでAngularJS関数を実行できます。

AngularJSイベントはHTMLイベントを上書きせず、両方のイベントが実行されます。

マウスイベント

マウスイベントは、カーソルが要素上を次の順序で移動したときに発生します。

マウスオーバーの
of-mouseenter
ng-mousemove
ng-mouseleave

または、要素をマウスボタンでクリックすると、次の順序で実行されます。

of-mousedown
of-mouseup
クリックの

任意のHTML要素にマウスイベントを追加できます。

例

マウスがH1要素の上に移動したときに、カウント変数を増やします。

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="count = count + 1">Mouse over me!</h1>

<h2>{{ count }}</h2>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>

クリックディレクティブ

ディレクティブは、ng-click 要素がクリックされたときに実行されるAngularJSコードを定義します。

例

<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>

関数を参照することもできます。

例

<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>

トグル、True / False

ドロップダウンメニューのように、ボタンがクリックされたときにHTMLコードのセクションを表示し、ボタンが再度クリックされたときに非表示にする場合は、ボタンをトグルスイッチのように動作させます。

<div ng-app="myApp" ng-controller="myCtrl">

<button ng-click="myFunc()">Click Me!</button>

<div ng-show="showMe">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
  <div>Pesce</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ブール値として始まりますfalse。

このmyFunc関数は、（not）演算子showMeを使用して、変数をその逆に設定します。!

$ eventオブジェクト

$event関数を呼び出すときに、オブジェクトを引数として渡すことができます。

オブジェクトには、ブラウザの$eventイベントオブジェクトが含まれています。

例

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-mousemove="myFunc($event)">Mouse Over Me!</h1>

<p>Coordinates: {{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>

❮ 前次 ❯

チュートリアル

例

リファレンス

AngularJSイベント