skillup

技術ブログ

UI デザイン

AngularJS カスタムディレクティブ

投稿日:

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。

これをオリジナルで自作することができます。

customer_directive.js

index.html

http://qiita.com/Quramy/items/dd4e7d2693c32d92048c

これを踏まえて、例えばある入力欄でEnterキーを押したときに特定のクラスをもった入力欄に移動するというイベントをHTML要素に付与したいとします。

主に入力欄が表のようになっているテーブル形式のHTMLを考えます。

 

http://angularjsninja.com/blog/2014/02/03/angularjs-event-on-enter/

http://blog.all-in.xyz/2015/12/18/how-to-move-focus-by-enter-key/

https://sndbox.jp/websystem-develop/angularjs/javascriptangularjs%E3%81%A7%E6%AC%A1%E3%81%AE%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%B8%E8%87%AA%E5%8B%95%E3%81%A7%E7%A7%BB%E5%8B%95%E3%81%95%E3%81%9B%E3%82%8B 

-UI, デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSネタに関して

何回か書いてきたCSSのまとめネタ的なもの。 紙で印刷しておくと生産性が3倍ぐらいになる。思った以上にコーディングがしやすい。 良く使うユーティリティ系の操作をまとめる。ベンダープレフィックス以外にも …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …