AngularJSでラジオボタンの選択値を動的に取得する方法

AngularJSでラジオボタンの選択値を動的に取得できない問題の解決法

ng-repeatなどでリストを表示している際、ラジオボタンの選択値を動的に取得したいケースはよくあります。しかし、ng-modelに同じ変数をそのままバインドすると、すべての行で選択状態が共有されてしまい、意図した通りに動作しません。

解決策：ng-modelに$indexを追加する

この問題を解決するには、各ラジオボタンのng-modelに$indexを追加します。$indexはng-repeatブロック内で各行のインデックス番号を表す特殊なスコープ変数のため、これを利用することで行ごとに独立したモデルとして値を管理できるようになります。

<td><input type="radio" ng-model="classes.satisfies[$index]" value="Country1"> インド</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Country2"> アメリカ</td>

上記のように記述すると、classes.satisfiesが配列として扱われ、各行のラジオボタンの選択結果が対応するインデックスに格納されます。その結果、AngularJSでもラジオボタンの選択値を動的に取得できるようになります。

実装時のポイント

• $indexはng-repeatディレクティブの内部でのみ使用できるスコープ変数です。
• ng-modelを配列形式（[$index]）にすることで、複数行のデータを個別に扱えます。
• コントローラー側で$scope.classes.satisfies = []のように配列として初期化しておくと、未定義エラーを防げて安全です。