スクリプト内にラジオボタンに表示するラベル名と値を定義し、ng-repeatを使ってラジオボタンを作成する方法をまとめました。
デモとコードサンプルはこちら。
※目次をクリックすると目次の下部にコンテンツが表示されます。
$parent属性を使用する方法
スクリプト内に定義した$scope.prefsの配列データをng-repeatを使ってラジオボタンを生成する例を下記に示します。
<div class="radio" ng-repeat="item in prefs"> <label> <input type="radio" ng-model="$parent.selectedPref" value="{{item.id}}">{{item.name}} </label> </div>
ここで注意するべき点として、ng-repeatは各繰返し要素に対し子スコープを生成するという事があります。<input type=”radio” ng-model=”selectedPref”と設定すると、各ラジオボタンがそれぞれ独立したselectedPref変数を持つことになってしまい、正常に動作しません。
そこで$parent属性を付与して、各ラジオボタンが親スコープのselectedPref変数に対して選択した値を保存するように設定しています。
JavaScriptのプロトタイプ継承使って設定
$parent属性を使わず、JavaScriptのプロトタイプ継承使って設定する例を以下に示します。
下記例では、親スコープであるコントローラ内にdataという名前のオブジェクトを定義し、そのオブジェクトの”selectedPref”という属性に対してラジオボタンで設定した値を保存しています。
この場合は、繰返し要素内の子スコープ内にはdataオブジェクトは定義されていないため、JavaScrptのプロトタイプ継承の仕組みによって親スコープにdataオブジェクトが定義されていないか確認しにいきます。親スコープにdataオブジェクトが定義されているので、親スコープのdata.selectedPrefに対してラジオボタンの値が保存されます。
下記例では、親スコープであるコントローラ内にdataという名前のオブジェクトを定義し、そのオブジェクトの”selectedPref”という属性に対してラジオボタンで設定した値を保存しています。
この場合は、繰返し要素内の子スコープ内にはdataオブジェクトは定義されていないため、JavaScrptのプロトタイプ継承の仕組みによって親スコープにdataオブジェクトが定義されていないか確認しにいきます。親スコープにdataオブジェクトが定義されているので、親スコープのdata.selectedPrefに対してラジオボタンの値が保存されます。
(スクリプト) $scope.data = {}; $scope.data.selectedPref="01"; (HTML) <div class="radio" ng-repeat="item in prefs"> <label> <input type="radio" ng-model="data.selectedPref" value="{{item.id}}"{{item.name}} </label> </div> 選択した値: {{data.selectedPref}}
ラジオボタンのng-change属性の使用例
ng-change属性を使って、ユーザーのラジオボタン選択操作を検知し、検知後の動作を定義する事が出来ます。
下記例では、ラジオボタンで県名を選択すると、各県の詳細情報を保持する配列データから選択した県と同じインデックスを持つデータを選択し、リストで表示しています。
下記例では、ラジオボタンで県名を選択すると、各県の詳細情報を保持する配列データから選択した県と同じインデックスを持つデータを選択し、リストで表示しています。
(スクリプト) $scope.prefs = [ { id: "01", name: "東京都"}, { id: "02", name: "神奈川県"} ]; var prefsDetail = [ { id: "01", name: "東京都", kencho: "新宿区", jinko: "・・・・"}, { id: "02", name: "神奈川県", kencho: "横浜市", jinko: "・・・・"} ]; $scope.selectedPref="01"; $scope.data = {}; $scope.data.selectedPref="01"; $scope.data.pref=prefsDetail[0]; $scope.data.changePref = function(index) { $scope.data.pref=prefsDetail[index]; }; (HTML) <div class="radio" ng-repeat="item in prefs"> <label> <input type="radio" ng-model="data.selectedPref" value="{{item.id}}" ng-change="data.changePref($index)">{{item.name}} </label> </div> 選択した値: {{data.selectedPref}} <ul> <li ng-repeat="item in data.pref">{{item}}</li> </ul>
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データをバインドして表示
カスタムディレクティブ