0

저는 Angular를 처음 사용하고 라디오 버튼의 기본 옵션 설정에 몇 가지 문제가 있습니다. 이미 다른 답변을 확인한 후 $parent을 사용하여 문제가 해결되지 않거나 잘못 사용하고 있습니다. 라디오 버튼 페이지의 표시 만 그룹 1 (쌍), 올바르게 라디오 버튼 그룹에 대한 디폴트 값을 설정하는 경우ng-model 및 ng-repeat가 포함 된 여러 세트의 라디오 버튼

input type="radio" name="@{{ form.form_id }}[email protected]{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_a}}" > @{{ field.field_data.value_a }} <br> 
input type="radio" name="@{{ form.form_id }}[email protected]{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_b }}"> @{{ field.field_data.value_b }} 

:

는 I 2 입력을 포함 라디오 버튼의 그룹. 여기서 문제는 ng-repeat에 의해 생성 된 3 개의 그룹 (3 쌍)의 라디오 버튼이있을 때 마지막 라디오 버튼 그룹의 값만 설정하고 다른 2 개 그룹은 선택하지 않거나 비워 둡니다.

2 ng 반복을 사용하여 라디오 버튼이 생성 되었기 때문에 이것이 가능합니까? 도움을 받으려면 여기에 내 코드가 있습니다.

$scope.filtered_forms[index] = { 
     form_id:id, 
     fields:[{ 
      field_data: {field.label, 
          field_suggested:string, 
          value_a:string, 
          value_b:string}, 
      field_type: radio 
      },{ 
      field_data: {field.label, 
          field_suggested:string, 
          value_a:string, 
          value_b:string}, 
      field_type radio 
      },{ 
       ...same input as above each object represents a group of radio 
      }] 
} 

기본적 $scope.filtered_forms 폼 물체를 포함

는 I가 설정되고 배열 $scope.filtered_forms있다. 내 HTML 파일에서, 나는이 있습니다

<div ng-repeat="form in filtered_forms" id="@{{ form.form_id }}"> 
<table class="table" id="borderless"> 
     <tr ng-repeat="field in form.fields"> 
       <th scope="row" width="35%">@{{ field.field_data.label }}</th> 
       <td> 
        <div ng-if="field.field_type == 'radio'" style="margin-bottom: 10px"> 
         <input type="radio" name="@{{ form.form_id }}[email protected]{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_a}}" > @{{ field.field_data.value_a }} <br> 
         <input type="radio" name="@{{ form.form_id }}[email protected]{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_b }}"> @{{ field.field_data.value_b }} 
        </div> 
       </td> 
     </tr> 
    /table> 

이 바로 여기에 2 개 그룹/라디오 버튼의 쌍을하지만 마지막 그룹은 기본 값을 가져옵니다을 생산하고 있습니다. ng-checked를 사용하고 $ parent가없는 경우에도.

추가 정보 field_suggested는 value_a 또는 value_b와 동일한 값을 갖습니다. 라디오 버튼이 2 ng 반복 이하임을 알 수 있습니다. 나는 laravel blade를 사용하고 있는데,이 html 파일은 모달 안에 있습니다. 문제와 관련없는 양식 안의 일부 html 데이터 및 속성을 제거했습니다.

도움을 주시면 감사하겠습니다.

감사합니다!

+0

코드를 보면 두 번째 ng-repeat에서 각 인덱스에 대한 form.fields를 반복하므로 동일한 이름, 모델 등으로 두 개의 라디오가 만들어집니다. 원하는 것은 무엇입니까? –

+0

@nikhilmehta 네, 같은 이름과 모델을 가진 2 개의 라디오를 만들 것입니다. 이것은 하나의 그룹/라디오 버튼 쌍입니다. 3 개의 라디오 그룹이 생기면 기본적으로 마지막 그룹 만 설정됩니다. – NewbieLearner

답변

0

많은 것들이 섞여있는 것처럼 보입니다. 나는 당신의 코드를 복사하여 plunker를 만들었고 라디오 그룹의 이름이 실제로 form_id _ {{$ index}}가 아니라 전체 객체를 문자열로 가지고 있음을 발견했다. 나는 그것이 당신을 돕기를 희망하는 코드를 변경했습니다. 코드를 참조하십시오. here 그룹 이름에 문제가 있습니다. 왜 이름에 @을 사용하고 있습니까? 제대로 작동하면 제거하십시오. 또한 name 속성 값에 특수 문자가 없음을 확인하십시오.

name="{{ form.form_id }}_{{ $index }}" 
+0

이봐, 내가 @를 추가 한 이유는 laravel blade를 다룰 때 {{value}}가 PHP 변수를 참조하기 때문이다. 각도 js 변수를 호출하려면 @ {{value}}가 필요합니다. – NewbieLearner

+0

그런 경우 특수 문자가 포함되어있는 경우 개발자 도구에서 라디오 버튼의 이름을 확인하십시오. 예를 들어 발생하는 동작이 원인 일 수 있습니다. 그것이 무엇을 포함하지 않으면? –

+0

나는 그것을 조사 할 것이다. 하지만 현재, 내 코드를 사용하면'name = "26_1"'이 표시됩니다. – NewbieLearner