AngularJS のマウスイベント

AngularJS でのマウスイベントをとってみました。

今回は実験的にですが jsdo.it にデモをアップしてみました。

自前のサイトにアップするより、コードをちょこっと試すのには良いですね〜。

ただし、挙動がちょっと怪しいのはご容赦を（笑）

なんか特定のイベント処理が捌けないときがあります（これはボクのコードのせいかもしれないですが・・・）

イベントの登録・取得

今回は以下のイベントを捕捉してみました。
右側の ng-xxx が AngularJS での記述方法になります。

• click：ng-click
• double click：ng-dblclick
• mouse down：ng-mousedown
• mouse move：ng-mousemove
• mouse up：ng-mouseup
• mouse enter：ng-mouseenter
• mouse over：ng-mouseover
• mouser leave：ng-mouseleave

使い方はデモと合わせて見ていただきたいですが、

    <div ng-click="click()"><div>

と記述します。

いわゆる onclick="click()" を AngularJS 流に書くとこうなります。

 今回は１つのdivに先ほどのイベントを全部登録して、発生したイベントをただリスト表示しているだけですので、処理の内容については特に触れません。 

イベントのリスト表示（ ng-repeat ）

    <div id="eventLog">
        <p ng-repeat="event in events">
            {{event.type}} ...(省略)
        </p>
    </div>

events から中身を１つずつ取り出して、そこからtypeを取得・表示しています。

jQuery でいうところの $.each() と同じような感じになります。

※events の中身はハッシュオブジェクトの配列

    { 'type': 'click', 'count': 1 },
    { 'type': 'mouse move', 'count': 10 },
        ...
    { 'type': 'mouse leave', 'count': 1 }

Facebook のいいねのとこのアレ（ ng-pluralize ）

いいねのところって、１人の時と複数人の時とかで表記が違っていますよね。

•  ○○さんがいいねといっています。
•  ○○さんと○○さんと他○○名がいいねといっています。

 AngularJS では、この振り分けするための機能も用意されています。

    <span ng-pluralize count="event.count " when="{ 'one':  '', 'other': ' * {{event.count}}' }"></span>

 ng-pluralize の記述と count="対象" when="{ 設定 }" で指定します。

今回のデモでは、同じイベントが続けて実行された場合、実行回数をまとめて表示するようにしていて、実行回数が１回の時は何も表示しない、それ以外（２回以上）は実行回数を表示します。

うまく説明できてないですが、コードを少しに触ってみて頂けるとわかるかな〜と思います。本家サイトのAPIの方がわかりやすいかも。。。

気軽にコードを試してもらえるように、今回から jsdo.it にアップをしています。

よろしかったら遊んでみてください。

ということで、今回はこの辺で。