AngularJS에서 라디오 버튼 값이 동적으로 바인딩되지 않는 문제
AngularJS에서 ng-repeat로 생성된 목록 안에 라디오 버튼을 배치하면, 선택한 값이 의도한 대로 동적으로 반영되지 않는 경우가 자주 발생합니다. 이는 ng-repeat가 각 항목마다 새로운 자식 스코프(scope)를 만들기 때문입니다.
해결 방법: ng-model에 $index 추가하기
가장 간단한 해결책은 각 라디오 버튼의 ng-model에 [$index]를 붙여주는 것입니다. 이렇게 하면 반복되는 각 항목이 고유한 모델 속성에 바인딩되어 선택 값이 정상적으로 동적으로 반영됩니다.
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Country1"> India</td>
<td><input type="radio" ng-model="classes.satisfies[$index]" value="Country2"> US</td>
동작 원리
$index는 ng-repeat 루프 내에서 현재 항목의 인덱스를 나타내는 특수 변수입니다. 위 예제처럼 classes.satisfies[$index] 형태로 지정하면, 배열의 각 요소가 개별적으로 관리되므로 여러 행에 걸친 라디오 그룹에서도 선택된 값이 컨트롤러로 정확하게 전달됩니다.
추가 팁
- 컨트롤러에서 초기값을 설정할 때는
$scope.classes.satisfies = [];처럼 배열로 초기화해 주세요. - 기본 선택 항목을 지정하려면 해당 인덱스에 미리 값을 할당하면 됩니다. 예:
$scope.classes.satisfies[0] = 'Country1'; - AngularJS 1.x의 스코프 상속 문제를 피하려면 컨트롤러에
controller as문법을 사용하는 것도 좋은 대안입니다.
이 방법을 적용하면 AngularJS에서 라디오 버튼의 선택 값을 동적으로 가져오는 문제를 손쉽게 해결할 수 있습니다.