lightning:RadioGroup inside aura:iteration

Question

I'm attempting to generate a lightning:radioGroup selection inside my data table, I have a object returning a List<String> but it isn't giving me the styling, it's spitting out the data correct.

<aura:iteration items="{!v.column.selectOptionRow}" var="option" indexVar="idx"> 
    <lightning:radioGroup aura:id="radioGrp- + idx" name="radioButtonGroup" label="{!option.radioLabel}" options="{!option.radioValue}" value="{!v.radioGrpValue}" onchange="{! c.handleRadioGroupChange}"/>
</aura:iteration> 

And it appears like this

Am I going about this wrong

Answer 1

lightning:radioGroup is a self-contained element that expects an attribute named "options" to be set. What you're doing is basically showing a bunch of "empty" radio groups.

If you want to use an iteration, specify lightning:input type="radio" name="radioGroup". Each radio group item must have the same name. Note that aura:id cannot be dynamically rendered, so don't bother trying.

<aura:iteration items="{!v.column.selectOptionRow}" var="option" indexVar="idx"> 
    <lightning:input aura:id="assignmentOptions" name="radioButtonGroup" label="{!option.radioLabel}" type="radio" options="{!option.radioValue}" value="{!v.radioGrpValue}" onchange="{! c.handleRadioGroupChange}"/>
</aura:iteration> 

If you want to use lightning:radioGroup, then simply specify the options in an attribute:

<lightning:radioGroup aura:id="assignmentOptions" name="radioButtonGroup" options="{!v.column.selectOptionRow}" value="{!v.radioGrpValue}" onchange="{! c.handleRadioGroupChange}"/>

(Note: I haven't carefully checked all the attributes, some additional tweaking may be needed. Please check the documentation.)