Установите только один флажок (поведение переключателей) в цикле * ngFor

У меня есть модуль Quizz, разработанный в Angular2, так что просто некоторые вопросы с предложенными ответами, и вы должны проверить только один ответ, я знаю, что радиокнопки могут обрабатывать ситуация, но я хочу, чтобы это были флажки с поведением переключателя, проблема в том, что я выполнил часть задания, но поскольку это сложнее в цикле *ngFor, как только я проверяю ответ B-Question на A-Question ответ будет снят и так далее. Вот мой HTML:Установите только один флажок (поведение переключателей) в цикле * ngFor

<div *ngFor="#qt of listQuestion"><h3 class="uk-accordion-title" >{{qt.wordingQ}}</h3> 

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

    <input type="checkbox" class="cb" id="0" [(ngModel)]="qt.chp[0]" onchange="cbChange(this)" /> 

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

    <input type="checkbox" class="cb" id="1" [(ngModel)]="qt.chp[1]" onchange="cbChange(this)" /> 

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

    <input type="checkbox" class="cb" id="2" [(ngModel)]="qt.chp[2]" onchange="cbChange(this)"/> 

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

    <input type="checkbox" class="cb" id="3" [(ngModel)]="qt.chp[3]" onchange="cbChange(this)"/> 

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

           </div></div>

А вот скрипт делает соло-проверки так:

<script> 
    function cbChange(obj) { 
    var cbs = document.getElementsByClassName("cb"); 
    for (var i = 0; i < cbs.length; i++) { 
     cbs[i].checked = false; 
    } 
    obj.checked = true; 
    } 
</script>

Как вы можете видеть это *ngFor цикл, чтобы загрузить список вопросов; каждый вопрос имеет список предложений (lpo[i]), а [(ngModel)]="qt.chp[i]" предназначен для определения статуса каждого предложения (проверенное предложение). Думаю, мне нужно отнести каждую функцию onchange к каждому уникальному ngModel (как и при индексировании), но я не секрет производства. Любая помощь Пожалуйста? (Вот реальный образ ситуации)

источник

2016-06-17 selem mn

Посмотрите на это: [Вы можете стилизовать кнопку HTML радио, чтобы выглядеть флажок?] (http://stackoverflow.com/questions/279421/can-you-style-an-html-radio-button-to-look-like-a-checkbox). – Sasxa

Рассматривая формулировку вопроса, кажется, что вы не поняли смысла, я не хочу, чтобы какие-либо элементы стиля, мои флажки работали плавно, а также переключатели, проблема в том, что как только я проверю ответ во втором вопросе, проверенный ответ в первом вопросе будет снят, это поведение должно быть за вопрос .. понял? –

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

class Question { 
    wording: string; 
    answers: string[]; 

    selectedAnswer: string; 

    selectAnswer(ans: string) { 
     this.selectedAnswer = ans; 
    } 
}

В будущем, вы можете легко изменить свойство selectedAnswer и реализацию функции selectAnswer, чтобы удовлетворить множественный выбор, если это необходимо. Шаблон вопроса, то необходимо изменить немного, чтобы приспособить изменение:

<div *ngFor="let question of questions"> 
    <p>{{question.wording}}</p> 
    <div *ngFor="let answer of question.answers; let aIndex = index"> 
    <input type="checkbox" class="cb" id="{{aIndex}}" [ngModel]="answer === question.selectedAnswer" (ngModelChange)="question.selectAnswer(answer)" /> 
    <label for="{{aIndex}}" class="inline-label" > <b>{{answer}}</b></label><br><br> 
    </div> 
</div>

Вот является работоспособным plunker: http://plnkr.co/edit/xMTtFp31rU2ZqCtV8JO1?p=preview

источник

2016-06-17 01:24:43

Установите только один флажок (поведение переключателей) в цикле * ngFor

ответ

Смежные вопросы