Несколько переключателей внутри нескольких повторяющихся элементов — AngularJS

У меня есть проблема, которую я не смог решить с помощью других связанных SO Q/A.

Это моя ситуация:

  • Item in Items -> multiple repeated items (using ng-repeat)
    • each item has n buttons (using ng-repeat)

Я могу правильно видеть каждый элемент с его собственными кнопками, но я не могу выбрать нужную кнопку при нажатии.

Когда я нажимаю кнопку за пределами кнопок первого элемента, событие не работает должным образом, оно запускает события для первого элемента.

Я хотел бы добиться того же результата, что и в этом плункере, который я только что сделал.

Вот мой исходный код:

Шаблон, который включает шаблон отдельного элемента для каждого элемента:

<div class="myClass" ng-repeat="item in items">
  <div ng-include src="mySingleElement"></div>
</div>

Шаблон одного элемента с несколькими переключателями:

<ul>
    <li ng-repeat = "button in survey.buttons">
        <input type="radio" id="radio_{{$parent.$index}}" 
               name="radio{{$parent.$index}}""/>

            <label for="radio_{{$parent.$index}}">
              <span></span>{{button.text}}
            </label>
     </li>
</ul>

Вот несколько изображений, на которых я показываю поведение в своем приложении:

Исходная ситуация, например. с двумя элементами:

В первом элементе я могу щелкнуть только первый переключатель, если я нажимаю другие кнопки, они всегда проверяют первый.

Я могу щелкнуть только первый переключатель, если я нажму на другие, они не будут работать

Попытка взаимодействия со вторым элементом:

Происходит то же самое, что и в первом, то же самое и со всеми остальными предметами.

введите здесь описание изображения

Я действительно не понимаю, почему он не работает должным образом, как в Plunker. Я сделал плункер с точно таким же кодом, но включил макет одного элемента с ng-include в отдельном файле.

Что я делаю неправильно и как решить эту проблему? Это вызвано ng-include?


angularjs radio-button angularjs-ng-repeat angularjs-ng-include
person AndreaM16    schedule 30.05.2016    source источник
comment
Почему вы назначаете родительский индекс переключателям. Из-за этого все переключатели имеют одинаковый идентификатор. Это может быть из-за того, что он всегда выбран первым.   -  person Rambler    schedule 30.05.2016
comment
Если я не использую $parent, единственный элемент, который может проверять кнопки, - это первый, не знаю почему.   -  person AndreaM16    schedule 30.05.2016

Ответы (1)


arrow_upward
2
arrow_downward

Кажется, проблема в том, что мы пытаемся использовать один и тот же идентификатор переключателя при повторении для элемента 1 до элемента n. Допустим, индекс начинается с 1.

Например

Item 1 -> radio_1,radio_2,radio_3....
Item 2 ->radio_1,radio_2,radio_3...
Item 3 ->radi0_1,radio_2,radio_3...

Но чтобы сделать это правильно, нам нужно

Item 1 ->radio_1_1,radio_1_2,radio_1_3...
Item 2 ->radio_2_1,radio_2_2,radio_2_3.... 
Item 3 ->radio
<div class="myClass" ng-repeat="item in items" ng-init="outerIndex = $index">

1,radio
<div class="myClass" ng-repeat="item in items" ng-init="outerIndex = $index">

2,radio
<div class="myClass" ng-repeat="item in items" ng-init="outerIndex = $index">

3....

Итак, нам нужно получить индекс элемента из первого повторения ng, как это

<div class="myClass" ng-repeat="item in items" ng-init="outerIndex = $index">

Затем 2 ng-repeat, которые будут вложены внутрь первого, будут

<ul>
<li ng-repeat = "button in survey.buttons" ng-init="innerIndex = $index">
    <input type="radio" id="radio_{{outerIndex}}_{{innerIndex}}" 
           name="radio{{outerIndex}}_{{innerIndex}}""/>

        <label for="radio_{{outerIndex}}_{{innerIndex}}">
          <span></span>{{button.text}}
        </label>
 </li>

person AGdev    schedule 30.05.2016
comment
Спасибо, теперь я могу также проверять кнопки в других элементах, кроме первого, но это позволяет мне проверять более одного из них одновременно. Как я могу позволить только одной кнопке получать чек за раз? - person AndreaM16; 30.05.2016
comment
Ничего, исправил, пришлось поставить то же имя name="radio_{{outerIndex}}". Благодарю вас! - person AndreaM16; 30.05.2016
comment
Благодаря @AGdev и AndreaM16 я смог решить проблему, и для тех, кто хочет прикрепить ng-модель, попробуйте этот ng-model=answers[outerIndex] (на радио-вводе) и создайте $scope.answers = []; в коде вашего контроллера js - person Abdeali Chandanwala; 25.09.2019