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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.