2

I have a iteration where i need to get input field values but I am unable to get the values {!v.BundleProductWrapperItems} this is from other function -- this is my cmp

      <aura:iteration items="{!v.BundleProductWrapperItems}" var="vCWI" indexVar="index">
                                    <tr>
                                        <td class="slds-cell-wrap slds-size--2-of-12">
                                            <ui:outputText value="{!vCWI.productName}" />
                                        </td>
                                        <td class="slds-cell-wrap slds-size--1-of-12" data-selected-Index="{!index}">
                                             <lightning:input name="{!index}" value="{!vCWI.bundleListPrice}" onchange="{!c.calculateDefaultFees1}"/>
                                        </td>
                                        <td class="slds-cell-wrap slds-size--1-of-12" data-selected-Index="{!index}">
                                             <lightning:input name="{!index}" value="{!vCWI.bundleDiscount}" onchange="{!c.calculateDefaultFees1}"/>

                                        </td>
                                        <td class="slds-cell-wrap slds-size--1-of-12" data-selected-Index="{!index}">
                                              <lightning:input name="{!index}" value="{!vCWI.bundleMargin}" onchange="{!c.calculateDefaultFees1}"/>
                                        </td>
                                        <td class="slds-cell-wrap slds-size--1-of-12" data-selected-Index="{!index}">
                                            <lightning:input name="{!index}" value="{!vCWI.grossBillingsFees}" disabled="true"/>
                                        </td>
                                        <td class="slds-cell-wrap slds-size--1-of-12" data-selected-Index="{!index}">
                                             <ui:inputText class="slds-input" aura:id="grossmf" value="{!vCWI.grossMarginFees}" disabled="true" />
                                        </td>
                                    </tr>
          </aura:iteration>

this is my JS

    calculateDefaultFees1:function(component, event, helper){
        var BundleDiscount=component.find("idblp").get("v.value");
        var margin=component.find("idbm").get("v.value");

    }

let me know where i am going wrong.

If you see the pic, billing fee and margin fee are autocalculated.

but there are 0's in the fields user will fill the change the value from 0 to any other interger that Billing and margin fee needs to be calculated.

2 Answers 2

2

No you cannot do that, You don't know the index to get the appropriate value from the list.

I know one approach which I used for similar functionality. As you are using slds-input class, it makes sense to use lightning:input Use name to store the index of the record . On button click, from event variable get the "name" of the item clickeed(That would be index). Use that index to get values from list.

So your code will be, notice i am populating name with index:

<lightning:input name="{!index}" value="{!vCWI.bundleListPrice}" onchange="{!c.calculateDefaultFees1}"/>

and then in your button click code:

({
    calculateDefaultFees1 : function(component, event, helper) {

        var indexOfElementChanged = event.getSource().get("v.name");

        var elementList = component.get("v.BundleProductWrapperItems");

        var changedItem = elementList[indexOfElementChanged];

        //Do your calculations and then set the array back to attribute

        changedItem.grossbilling = changedItem.bundleListPrice + (changedItem.bundleDiscount + changedItem.bundleMargin); 
        changedItem.grossmargin = changedItem.bundleDiscount + (changedItem.bundleDiscount - changedItem.bundleMargin);
         component.set("v.BundleProductWrapperItems",elementList );



    }
})

If you still want to use ui:input , you have append index in the class attribute, Notice, I am prefixing 'MyIndex'+index, it makes it easier for me find the index of element changed.

<ui:inputText class="{!'MyIndex'+index+' slds-input'}" aura:id="idblp" value=" 
    {!vCWI.bundleListPrice}" change="{!c.calculateDefaultFees1}"  />

JS code:

calculateDefaultFees1 : function(component, event, helper) {
    var classes=    event.getSource().get("v.class")

    var indexClassName=classes.split(" ")[0];
    var indexOfElementChanged = indexClassName.replace("MyIndex","");
    var elementList = component.get("v.BundleProductWrapperItems");
     var changedItem = elementList[indexOfElementChanged];

     //Do your calculations and then set the array back to attribute

    changedItem.grossbilling = changedItem.bundleListPrice + (changedItem.bundleDiscount + changedItem.bundleMargin); 
        changedItem.grossmargin = changedItem.bundleDiscount + (changedItem.bundleDiscount - changedItem.bundleMargin);
         component.set("v.BundleProductWrapperItems",elementList );

 }
0
1

After you edited the question i am able to clearly understand what you need.

Trick is put the entire contents inside aura iteration in a separate component.

Step 1:

Put these into a separate component. Lets say component name is 'PriceComp'

 <ui:inputText class="slds-input" aura:id="idblp" value="{!vCWI.bundleListPrice}" change="{!c.calculateDefaultFees1}"  />
 <ui:inputText class="slds-input" aura:id="idbm" value="{!vCWI.bundlemarginPrice}" change="{!c.calculateDefaultFees1}"  />

Step 2: From iteration pass the each individual item to the new component

 <aura:iteration items="{!v.BundleProductWrapperItems}" var="vCWI" indexVar="index">

<c:PriceComp item = "{!vCWI}"/>

Step 3:

when input text is edited, your change controller method will get fired and if you update the item variable your 2 calculated price columns will get updated as well in UI.

Just add logic within the change method to set values for the 2 columns gross billing and margin fees

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .