AngularJSでのイベント処理を色々試してみます。
ng-click
クリック時のイベント。
HTML
<div ng-init="count = 0">
<button ng-click="count = count + 1">カウンター</button>
<p>{{count}}</p>
</div>
ng-dblclick
ダブルクリック時のイベント。
HTML
<div ng-init="count = 0">
<button ng-dblclick="count = count + 1">カウンター</button>
<p>{{count}}</p>
</div>
ng-mousedown・ng-mouseup
ng-mousedownはマウスダウン時、ng-mouseupはマウスアップ時のイベント。
HTML
<div ng-init="downCount = 0, upCount = 0">
<button ng-mousedown="downCount = downCount + 1" ng-mouseup="upCount = upCount + 1">カウンター</button>
<p>マウスダウン: {{downCount}}</p>
<p>マウスアップ: {{upCount}}</p>
</div>
ng-mouseenter・ng-mousemove・ng-mouseleave
ng-mouseenterはオンマウス時、ng-mousemoveはマウスムーブ時、ng-mouseleaveはマウスアウト時のイベント。
HTML
<div ng-init="enterCount = 0, moveCount = 0, leaveCount = 0" ng-mouseenter="enterCount = enterCount + 1" ng-mousemove="moveCount = moveCount + 1" ng-mouseleave="leaveCount = leaveCount + 1" style="background:#ccc;">
<p>マウスオン:{{enterCount}}</p>
<p>マウスムーブ:{{moveCount}}</p>
<p>マウスアウト:{{leaveCount}}</p>
</div>
ng-mouseenter・ng-mousemove・ng-mouseleaveのデモページ
ng-focus・ng-blur
ng-focusはフォーカスが当たったとき、ng-blurはフォーカスが外れたときのイベント。
HTML
<div ng-init="flag = true"> <input type="text" ng-focus="flag = !flag" ng-blur="flag = !flag"> <p ng-hide="flag">フォーカス中</p> </div>
ng-keydown・ng-keypress・ng-keyup
ng-keydownはキーダウン時、ng-keypressはキープレス時、ng-keyupはキーアップ時のイベント。
ng-keypressはCtrlやShiftなどではイベントが発生しません。
HTML
<div ng-init="downCount = 0, pressCount = 0, upCount = 0">
<input type="text" ng-keydown="downCount = downCount + 1" ng-keypress="pressCount = pressCount + 1" ng-keyup="upCount = upCount + 1">
<p>キーダウン:{{downCount}}</p>
<p>キープレス:{{pressCount}}</p>
<p>キーアップ:{{upCount}}</p>
</div>
ng-keydown・ng-keypress・ng-keyupのデモページ
ng-checked
値の評価がtrueのときにチェックボックスやラジオボックスがチェックされる。
HTML
<div> <input type="checkbox" name="" ng-model="flag">全てチェック<br> <input type="checkbox" name="" ng-checked="flag">サンプル1<br> <input type="checkbox" name="" ng-checked="flag">サンプル2 </div>
ng-copy・ng-cut・ng-paste
ng-copyコピー時、ng-cutはカット時、ng-pasteはペースト時のイベント。
HTML
<div ng-init="action = ''">
<input type="text" name="" value="サンプルテキスト" ng-copy="action = 'コピー'" ng-cut="action = 'カット'" ng-paste="action = 'ペースト'">
<p ng-hide="copyFlag">アクション:{{action}}</p>
</div>
ng-submit
フォーム送信時のイベント。
HTML
<form ng-init="flag = false" ng-submit="flag = true"> <input type="submit" value="送信"> <p ng-show="flag">送信しました</p> </form>
【参考サイト】
コメントが承認されるまで時間がかかります。