How to pass row index in javascript controller in lightning?

Question

I have a requirement where I am creating table row dynamically. I have to call javascript controller method from dynamically created ui:inputText using change="{!c.calculateCostAndPrice}" attribute. I need the current row Index from where method is being invoked. I have used aura-id to get the index but it works only for single row because, for multiple rows, aura-id will not be unique.

Component code-

<aura:iteration items="{!v.PhaseLineItemWrapper}" var="item" indexVar="index">
<table class="slds-table slds-table--bordered slds-accordian-sec" role="grid">
<tr class="slds-hint-parent" id ="{!index}">
    <td scope="row">
        <ui:inputText placeholder="Quantity"  value="{!item.QuantityOfItem}" class="slds-input" change="{!c.calculateCostAndPrice}" > 
    </td>
</tr> 
</table>

Controller method-

calculateCostAndPrice : function(component,event,helper){
   var resultCmp = component.find("thisInput").get("v.value");
   console.log("resultCmp:::"+resultCmp);}

Answer 1

I believe, as of now it is not possible with ui:inputText. As a workaround, you can use HTML input element with a custom HTML data-* Attribute.

Component:

<aura:component>
    <table class="slds-table slds-table--bordered slds-accordian-sec" role="grid">
        <aura:iteration items="1,2,3,4,5" var="item" indexVar="index">            
            <tr class="slds-hint-parent" id ="{!index}">
                <td scope="row"> 
                    <input data-row-index="{!index}" onchange="{!c.calculateCostAndPrice}" type="text" placeholder="Quantity"  value="{!item.QuantityOfItem}" class="slds-input" />
                </td>
            </tr> 
        </aura:iteration>
    </table>
</aura:component>

Controller:

({
    calculateCostAndPrice : function(component, event, helper) {
        var target = event.target;
        var rowIndex = target.getAttribute("data-row-index");
        console.log("Row No : " + rowIndex);
    }
})

Answer 2

I have found an alternate solution for my problem. I can get index from the label attribute of ui:inputText.

<aura:iteration items="{!v.PhaseLineItemWrapper}" var="item" indexVar="index">
<table class="slds-table slds-table--bordered slds-accordian-sec" role="grid">
    <tr class="slds-hint-parent" id="{!index}">
        <td scope="row">
            <ui:inputText placeholder="Quantity" label="{!index}" value="{!item.QuantityOfItem}" class="slds-input" change="{!c.calculateCostAndPrice}">
        </td>
    </tr>
</table>

Controller-

calculateCostAndPrice: function(component, event, helper) {
var indexvar = event.getSource().get("v.label");
console.log("indexvar:::" + indexvar);}

Answer 3

So basically I suggest you to use event.currentTarget.parentElement.parentElement.id to get the id

<tr class="slds-hint-parent" id ="{!index}">
    <td scope="row" >
        <ui:inputText placeholder="Quantity"  value="{!item.QuantityOfItem}" 
                                 class="slds-input" change="{!c.calculateCostAndPrice}" > 
    </td>
</tr> 

And Now In controller JS

Use

({
    calculateCostAndPrice : function(component, event, helper) {
        var rowIndex = event.currentTarget.parentElement.parentElement.id ;
        console.log("Row No : " + rowIndex);
    }
})