Несколько наборов переключателей с ng-model и ng-repeat

Я очень новичок в 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 группа (пара) переключателей, она правильно устанавливает значение по умолчанию для группы переключателей. Проблема здесь в том, что когда есть 3 группы (3 пары) переключателей, сгенерированных ng-repeat, он устанавливает значение только последней группы переключателей, а другие 2 группы остаются непроверенными или пустыми.

Это потому, что переключатели генерируются с использованием 2 повторов ng? Чтобы помочь, вот мой код.

У меня есть массив $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>

This right here produces 2 groups/pairs of radio buttons but only the last group gets a default value. Even when using ng-checked and even without $parent.

Дополнительная информация: field_suggested имеет то же значение, что и value_a или value_b. Вы можете видеть, что переключатель находится под 2 ng-repeats. Я использую laravel blade, и этот html-файл находится внутри модального окна. Я удалил некоторые данные и свойства html внутри формы, которые не имеют отношения к проблеме.

Любая помощь приветствуется.

Спасибо!


person NewbieLearner    schedule 28.09.2016    source источник
comment
Глядя на ваш код, я думаю, во втором ng-repeat, поскольку вы перебираете form.fields для каждого индекса, он создаст два радиоприемника с одинаковым именем, моделью и т. д. Это то, что вы хотите?   -  person nikhil mehta    schedule 28.09.2016
comment
@nikhilmehta да, он создаст 2 радиоприемника с одинаковым именем и моделью, и это будет 1 группа / пара переключателей. Когда я получаю 3 группы радио, по умолчанию будет установлена ​​только последняя группа.   -  person NewbieLearner    schedule 28.09.2016


Ответы (1)


Вы, кажется, смешали много вещей. Я скопировал ваш код, создал плункер и обнаружил, что имя для радиогруппы на самом деле не form_id_{{$index}}, а имеет весь объект в виде строки. Я изменил код, надеюсь, он вам поможет. См. код здесь Проблема связана с именами ваших групп, почему вы используете @ в именах . Удалите их, должно работать нормально. Также обратите внимание, что в значении атрибута имени нет специальных символов.

name="{{ form.form_id }}_{{ $index }}"
person nikhil mehta    schedule 28.09.2016
comment
Эй, причина, по которой я добавил @, заключается в том, что при работе с лезвием laravel {{value}} относится к переменной php. Чтобы вызывать переменные angular js, ему нужно @{{value}}. - person NewbieLearner; 28.09.2016
comment
в этом случае проверьте имя переключателя в инструменте разработчика, если оно содержит какой-либо специальный символ, если да, вероятно, это причина того, что вы получаете поведение, которое вы испытываете. Если нет, то что он содержит? - person nikhil mehta; 28.09.2016
comment
Я проверю это. Но в настоящее время, используя мой код, он будет отображать name="26_1". - person NewbieLearner; 28.09.2016
comment
Изменил подчеркивание на слово, в результате чего получилось name="26test1", и оно все еще не работает. - person NewbieLearner; 28.09.2016
comment
не могли бы вы создать plunker. Вам будет легко помочь. - person nikhil mehta; 28.09.2016