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

wp-admin

7年前

スクリプト内にラジオボタンに表示するラベル名と値を定義し、ng-repeatを使ってラジオボタンを作成する方法をまとめました。

デモとコードサンプルはこちら。
　
※目次をクリックすると目次の下部にコンテンツが表示されます。

１．$parent属性を使用する方法
２．JavaScriptのプロトタイプ継承使って設定
３．ラジオボタンのng-change属性の使用例

$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>