Blog

AngularJSのリピートを利用した都道府県のセレクトボックス

2014.01.22Cat:javascript デザイナー

住所を入力するフォームなどで、都道府県を選択するセレクトボックスをHTMLで組むと、

その部分がとても長くなり、編集するときなどに少し邪魔に感じることがあります。

 

この部分をコンパクトに記述する方法として、AngularJSを利用する方法もあります。

 

見た目としては、↓このくらいの差ができます(左が通常のHTML、右がAngulerJSを使った場合)。

通常とAngulerJSを使った都道府県のセレクトボックスの差

 

↓こちらのDEMO

DEMO

方法

まずはAngulerJSを読み込み、<body>にng-app属性を、

<select>の親要素にng-controller属性でコントローラの関数名を指定します。

 

次に、コントローラで、セレクトボックスに当てはめる都道府県のデータの設定をします。

HTML内に<script>で書くと、普通にHTMLでセレクトボックスを記述したときのように長くなってしまうので、

外部ファイルとして記述するのが良いと思います。

 

そして、<option>にデータ分全て記述するまで繰り返すため、

「ng-repeat属性」を記述します。

こちらの値は、”[プロパティ名] in [プロパティ名]”という形式で入力することで、

プロパティに含まれるデータが全て記述されるまで、繰り返しが起こることになります、

さらに、value属性と<option>内のテキストに、{{[プロパティ名].[子のプロパティ名]}}で、

コントローラで設定した値を出力するようにします。

これで、都道府県のセレクトボックスができました。

 

全体

 

このng-repeatを使った繰り返しでは、繰り返しを指定した要素ないで「{{$index}}」という記述をすることで、

繰り返しのindex番号をふることもできます。

↓例えばこんな感じです。

こちらでは、$indexは0から始まるので+1しています。

 

今回はコントローラーの中に直接値を入力しましたが、

AngulerJSは本来JSONの読み込みのような非同期通信に強みを持つので、

実際使うときは、その方法を使う方がいいかもしれません。

 

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ