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

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

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

no image

pcサイトのコーディングに関しての注意点。

PCサイトのコーディングをしていて気づいたことなど。 最近スマホばっかりやっててPCサイトのコーディング自体ものすごい久しぶりでした・・・ 幅が縮むということを常に意識する。 縮めた時にページが崩れた …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

破綻しないCSSについて

業務では開発する人間があまりおらず、プログラム以外にもデザイン(CSSなどのレイアウト)やらサーバーやら一人ですべてやることが多いです。 CSSなんかは最初に触ってから4,5年は立ちますけど、系統的に …