多组带有 ng-model 和 ng-repeat 的单选按钮

Question

我是 Angular 的新手，在设置单选按钮的默认选项时遇到了一些问题。我已经检查了其他答案，使用 $parent 并不能解决我的问题，或者我用错了。

我有一组单选按钮，其中包含 2 个输入：

input type="radio" name="@{{ form.form_id }}_@{{ $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 }}_@{{ $index }}" ng-model="$parent.field.field_data.suggested" value="@{{ field.field_data.value_b }}"> @{{ field.field_data.value_b }}

如果页面仅显示 1 组（对）单选按钮，则它正确设置了单选按钮组的默认值。这里的问题是，当 ng-repeat 生成 3 组（3 对）单选按钮时，它只设置最后一组单选按钮的值，其他 2 组未选中或留空。

这是因为单选按钮是使用 2 ng-repeats 生成的吗？为了提供帮助，这是我的代码。

我有一个数组$scope.filtered_forms，由以下人员设置：

$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 包含表单对象。在我的 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 }}_@{{ $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 }}_@{{ $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-repeats。我正在使用 laravel 刀片，这个 html 文件位于模态框内。我删除了表单中与问题无关的一些 html 数据和属性。

感谢任何帮助。

谢谢！

Answer 1

你似乎混合了很多东西。我复制了您的代码，创建了一个 plunker，发现无线电组的名称实际上不是 form_id_{{$index}}，但它具有整个对象作为字符串。我已经更改了代码，希望对您有所帮助。 见代码here 问题在于您的组名为什么要在名称中使用 @。请删除它们，它应该可以正常工作。另请注意，name 属性的值中没有特殊字符。

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