My requirement is I want to show questions and its options on lightning component and they are populating as expected. However since each question may have 2/4 options, I have used lightning:radioGroup to pick the correct answer. But I am not able to see the radio button to select the ans.
Also I tried to use Lightning:input of type "radio"tag, by doing so I can select option but the problem is I am able to select only one radio button on whole lightning component but if I have more than one question on a component, it won't allow me to choose answers for all ques.
Lightning cmp
<aura:attribute name="Questions" type="Questions__c[]"/>
<div style="width:600px; height:400px;position: absolute; top: 2rem; left: 2rem; margin:0 auto;">
<aura:iteration items="{!v.Questions}" var="ques" aura:id="accID" indexVar="index">
<div>
<li type="dice"> {!ques.Question_Context__c}</li>
<div style="absolute;left: 8rem; margin:0 auto;">
<ul>
<aura:iteration items="{!ques.Answers__r}" var="ans" indexVar="index">
<li>
<!-- 2nd Approach -->
<lightning:input type="radio" label="{!ans.Options__c}" name="options" />
<!-- 1st Approach -->
<lightning:radioGroup name="radioGroupRequired"
label="{! ans.Options__c}"
options="{! ans.Options__c}"
value="{! v.radioGrpValue}"
type="radio"
required="true"/>
</li>
</aura:iteration>
</ul>
</div>
<hr/>
</div>
</aura:iteration>
<div class="slds-align_absolute-center" >
<lightning:button label="Submit" onclick="{! c.handleClick }"/>
</div>
Apex class:
public class OnlineSFDCExam {
public class QuesAndAnsWrapper {
@AuraEnabled public Integer total {get;set;}
@AuraEnabled public List<Questions__c> questions{get;set;}
}
@AuraEnabled
public static QuesAndAnsWrapper fetchQuestions(Decimal pageNumber) {
QuesAndAnsWrapper obj = new QuesAndAnsWrapper();
obj.total = [SELECT count() FROM Questions__c];
obj.questions = [SELECT id, Name, Question_Context__c,
(SELECT Id,Options__c FROM Answers__r)
FROM Questions__c ];
return obj;
}
}
Where Questions__c is master object and Answers__c is child object. Please help!