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

transition関連

cssのanimationに関して。 例えばhoverしたときに色が変わる仕様はよくあることだと思いますが、transitionを入れることで時間差をつけることができます。 [crayon-5cb87 …

no image

HTML5について

CSSのサンプルを書いていく途中で、HTML5タグが出来てたので簡単におさらいです。 Contents1 HTML5のメリット1.1 form周りのhtml1.2 文章構造の明確化1.2.1 navに …

no image

timepickerについて

日付を入力するときに直接、文字入力するのがメンドイことからカレンダーが表示されるプラグインを使っている人は多いでしょう。 私も日頃Datepickerというライブラリを使っています。が、このプラグイン …

no image

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …