最新のWeb開発のチュートリアル
 

AngularJSイベント

❮前 次の章❯

AngularJSは、独自のHTMLイベントディレクティブを持っています。

AngularJSイベント

あなたはこれらの指令の一つ以上を使用して、HTML要素にAngularJSイベントリスナーを追加することができます。

  • 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の機能を実行することを可能にします。

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

マウスイベント

カーソルがこの順に、要素上を移動すると、マウスイベントが発生します。

  1. NG-のMouseEnter
  2. NG-マウスオーバー
  3. NG-のMouseMove
  4. NG-mouseleave

またはマウスボタンの順に、要素上でクリックされたとき。

  1. NG-マウスダウン
  2. NG-のmouseup
  3. NG-クリック

あなたは、任意の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-クリック指令

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機能が設定されますshowMe使用して、それが何であるかの反対に変数を! （ない）演算子を。

$イベントオブジェクト

あなたが渡すことができます$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>
»それを自分で試してみてください

❮前 次の章❯