AngularJSのng-repeatを使ってラジオボタンを作成

スクリプト内にラジオボタンに表示するラベル名と値を定義し、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に対してラジオボタンの値が保存されます。

(スクリプト)
$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>

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です