Pass multiple values from Lightning radio

Question

I need to pass mutiple values to Lightning radio button onChange function. Here's my code;

<aura:iteration items="{!v.records}" var="rec"> 
    <tr class="slds-hint-parent">                                                    
        <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">          
            <lightning:input type="radio" label="" value="{!rec.value__c}" name="options" onchange="{!c.onChangeFunction}" />           
        </td>
        <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
            <ui:outputText value="{!rec.value2__c}"/>   
        </td>
        <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
            <ui:outputText value="{!rec.value3__c}"/>   
        </td>
        <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
            <ui:outputText value="{!rec.value4__c}"/>   
        </td>
        <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
            <ui:outputText value="{!rec.value6__c}"/>   
        </td>
    </tr>   
</aura:iteration>

Here i want to pass multiple values to onChangeFunction function, instead of "{!rec.value__c}". Like value="{!rec.value__c}" "{!rec.value2__c}"

How can I do that?

Answer 1

You may have to wrap your <lightning:input> in a "dummy" component to then access what index of the record you are at. So something like this:

<aura:component access="global">

  <aura:attribute name="rec" type="Object" />
  <aura:attribute name="index" type="Integer" />

  <lightning:input
    type="radio"
    label=""
    value="{!rec.value__c}"
    name="options"
    onchange="{!c.onChangeFunction}"
  />
</aura:component>


({
    onChangeFunction : function(cmp, evt, help)
    {
        var myVal = cmp.get('v.rec.[anyOtherField]');
    }
})

Answer 2

You can pass object as a value attribute to lightning:input.

Update your lightning component as below.

    <aura:iteration items="{!v.records}" var="rec"> 
        <tr class="slds-hint-parent">                                                    
            <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">          
                <lightning:input type="radio" label="{!rec.fielLabel}" value="{!rec}" name="options" onchange="{!c.onChangeFunction}" />           
            </td>
 <!-- Pass object in the value -->
            <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
                <ui:outputText value="{!rec.value2__c}"/>   
            </td>
            <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
                <ui:outputText value="{!rec.value3__c}"/>   
            </td>
            <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
                <ui:outputText value="{!rec.value4__c}"/>   
            </td>
            <td class="slds-rich-text-area__content slds-grow slds-cell-wrap">
                <ui:outputText value="{!rec.value6__c}"/>   
            </td>
        </tr>   
    </aura:iteration>

JS Controller

({
    onChangeFunction :function(component, event, helper) {
        let rec = event.getSource().get("v.value");
        console.log("Value1 = "+rec.value__c);
        console.log("Value2 = "+rec.value2__c);
    }
})