Неправильное поведение при проверке переключателей в цикле (используя Angular2)

Question

Неправильное поведение при проверке переключателей в цикле (используя Angular2)

0

Я работаю над проектом Angular2 и в настоящее время я застрял в модуле Quizz, что иллюстрирует проблему; когда кандидат хочет пройти тест, он получит этот тест с некоторыми вопросами; каждый вопрос имеет 4 предложения с переключателями, и он должен отвечать, просто проверяя один из них на каждый вопрос. вот фрагмент HTML, о котором я говорю:

 <div *ngFor="#qt of listQuestion">

<h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3>

         <div class="uk-accordion-content">

          <input type="radio" id="radio_demo_1"  />

          <label for="radio_demo_1"> <b>{{qt.lpo[0]}}</b></label> <br><br>

          <input type="radio" id="radio_demo_2"  />

          <label for="radio_demo_2"><b>{{qt.lpo[1]}}</b></label><br><br>

          <input type="radio" id="radio_demo_3"   />

          <label for="radio_demo_3"> <b>{{qt.lpo[2]}}</b></label> <br><br>

          <input type="radio" id="radio_demo_4" />

          <label for="radio_demo_4"><b>{{qt.lpo[3]}}</b></label>


                                   </div> </div>

Где listQuestion - это список объектов Question, каждый из которых имеет wording и список предложений (lpo), таким образом я не могу проверить только одну радиокнопку для каждого вопроса, как показано ниже: Я попробовал чтобы удалить id в <input> tags и это по-прежнему та же проблема, я изменил id по name и дал одно и то же имя для всех тегов, таким образом, я мог проверить только одно предложение, но при переходе к другому вопросу и проверке новое предложение, первое будет очищено. Любая помощь Пожалуйста?

selem mn 06 июнь 2016, в 13:19

Источник

Теги:

angular

angularjs

html5

loops

radio-button

1 ответ

Ещё вопросы

Dmitriy Khudorozhkov · Accepted Answer · 2016-06-06T08-37-00.000Z

Ваша проблема в том, что, как вы это делаете сейчас, у вас есть одна группа радиостанций по всем вопросам. Вы можете решить эту проблему, создав динамические атрибуты name радиоэлементов. Что-то вроде этого:

<h3 class="uk-accordion-title" >{{qt.id}}</h3>

      <input type="radio" id="radio_demo_{{qt.id}}_{{index$}}" name="radio_demo_{{qt.id}}_{{index$}}" />

      <label for="radio_demo_{{qt.id}}_{{index$}}"> <b>{{qt.lpo[0]}}</b></label> <br><br>

{{qt.id}} (или любое другое свойство qt, которое однозначно идентифицирует вопрос) является ключевым здесь.

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