AngularJSのng-optionsを使ってSelectメニューを作成する方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
シンプルな設定方法
1)構文
<select ng-options=”value.label for value in array”>
array:データモデル内の配列
value:Selectメニュー選択時に適用される値
label:Selectメニューに表示される各メニューのラベル
2)使用例
○AngularJSスクリプト内のモデル
$scope.citys = [
{ id: “0101”, name: “港区”, pref: “東京都”},
{ id: “0102”, name: “渋谷区”, pref: “東京都”},
{ id: “0103”, name: “新宿区”, pref: “東京都”},
{ id: “0201”, name: “横浜市”, pref: “神奈川県”},
{ id: “0202”, name: “川崎市”, pref: “神奈川県”}
];
○HTML
<select ng-model=”selectCity1″ ng-options=”city.name for city in citys”>
<option value=””>市区町村を選択してください</option>
</select>
○説明
・Selectメニューの各メニューのラベルは、$scope.citysの各配列要素のname属性が表示される。
・Selectメニュー選択時の値は、$scope.citysの配列要素全体({“id”:”0101″,”name”:”港区”,”pref”:”東京都”})で、ng-modelで指定したselectCity1に反映される。
・Selectメニューの初期表示メニュー項目を下記のようにHTML側に記述。
<option value=””>市区町村を選択してください</option>
<select ng-options=”value.label for value in array”>
array:データモデル内の配列
value:Selectメニュー選択時に適用される値
label:Selectメニューに表示される各メニューのラベル
2)使用例
○AngularJSスクリプト内のモデル
$scope.citys = [
{ id: “0101”, name: “港区”, pref: “東京都”},
{ id: “0102”, name: “渋谷区”, pref: “東京都”},
{ id: “0103”, name: “新宿区”, pref: “東京都”},
{ id: “0201”, name: “横浜市”, pref: “神奈川県”},
{ id: “0202”, name: “川崎市”, pref: “神奈川県”}
];
○HTML
<select ng-model=”selectCity1″ ng-options=”city.name for city in citys”>
<option value=””>市区町村を選択してください</option>
</select>
○説明
・Selectメニューの各メニューのラベルは、$scope.citysの各配列要素のname属性が表示される。
・Selectメニュー選択時の値は、$scope.citysの配列要素全体({“id”:”0101″,”name”:”港区”,”pref”:”東京都”})で、ng-modelで指定したselectCity1に反映される。
・Selectメニューの初期表示メニュー項目を下記のようにHTML側に記述。
<option value=””>市区町村を選択してください</option>
メニュー選択時の値を指定する場合
上記1)では、メニュー選択時にデータモデルの各配列要素のオブジェクト全体が値として反映されました。配列要素の特定の属性を指定する場合は、下記構文で指定します。
1)構文
<select ng-options=”item.select as item.label for item in array”>
array:データモデル内の配列
item.select:Selectメニュー選択時に適用される値
item.label:Selectメニューに表示される各メニューのラベル
2)使用例
○AngularJSスクリプト内のモデル
上記1)と同じ
○HTML
<select ng-model=”selectCity2″ ng-options=”city.id as city.name for city in citys”>
○説明
・Selectメニュー選択時の値は、$scope.citysのid属性の値となり、ng-modelで指定したselectCity2に反映されます。
1)構文
<select ng-options=”item.select as item.label for item in array”>
array:データモデル内の配列
item.select:Selectメニュー選択時に適用される値
item.label:Selectメニューに表示される各メニューのラベル
2)使用例
○AngularJSスクリプト内のモデル
上記1)と同じ
○HTML
<select ng-model=”selectCity2″ ng-options=”city.id as city.name for city in citys”>
○説明
・Selectメニュー選択時の値は、$scope.citysのid属性の値となり、ng-modelで指定したselectCity2に反映されます。
グループ化してSelectメニューを表示
1)構文
<select ng-options=”item.select as item.label group by item.group for item in array”>
array:データモデル内の配列
item.select:Selectメニュー選択時に適用される値
item.label:Selectメニューに表示される各メニューのラベル
item.group:Selectメニューをグループ化するためのキー
2)使用例
○AngularJSスクリプト内のモデル
上記1)と同じ
○HTML
<select ng-model=”selectCity3″ ng-options=”city.id as city.name group by city.pref for city in citys”>
○説明
・group by city.prefと指定し、県名でグループ化して都市名をメニューとして表示。
<select ng-options=”item.select as item.label group by item.group for item in array”>
array:データモデル内の配列
item.select:Selectメニュー選択時に適用される値
item.label:Selectメニューに表示される各メニューのラベル
item.group:Selectメニューをグループ化するためのキー
2)使用例
○AngularJSスクリプト内のモデル
上記1)と同じ
○HTML
<select ng-model=”selectCity3″ ng-options=”city.id as city.name group by city.pref for city in citys”>
○説明
・group by city.prefと指定し、県名でグループ化して都市名をメニューとして表示。
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchを使って内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ
AngularJSの特徴、仕組み
ビルトインディレクティブ
- ビルトインのディレクティブの概要
- データバインディングのディレクティブの概要
- ng-repeatを使ってリスト、テーブル、フィルター
- ng-includeを使って別のHTMLファイルを埋め込み
- ng-switchで内部にあるHTMLテンプレートの表示を切り替え
- ng-if、ng-show、ng-hideを使って表示、非表示を切り替え
- ng-class、ng-styleを使ってCSSを設定
- イベント処理
- 有効、無効を切替えるディレクティブ
- フォームの入力チェックを行い、動的にCSS追加
- ng-optionsを使ってSelectメニューを作成
- ng-repeatを使ってラジオボタンを作成
- ビルトインのフィルターの使用方法
- ビルトインのフィルターで関数を使用
- カスタムフィルターの使用方法
- Bootstrap3を使ってページング
- スクリプト内でフィルターを使用、既存のフィルターを拡張
サービス
- サービスの概要とfactory、service、providerの使い分け
- $qサービスでpromise/deferredパターン
- $httpサービスの概要、サーバーからJSONデータ取得
- $httpサービスのPOSTでデータ送信
- $qサービスを使ってhttpリクエストを複数実行
- $httpサービスのinterceptorの使用方法
- AngularJSのwithCredentialsの設定、CORS
- $timeoutサービスと$intervalサービス
- $resourceサービスを使ってREST
- $locationサービスを使ってURLを操作
- $routeサービスと$resourceサービスを使ったサンプルを作成
- routeChangeSuccessを使ってflashメッセージ表示
- JavaScript、CSSを含むHTMLデータをバインドして表示
カスタムディレクティブ