I want change the value in the iteration. I want show fields of Account: Item_1__c, Item_2__c, Item_3__c, Item_4__c..... (we have 12custom fields Item_X__c, but we want show only 6 by default, and show more if user click on button addColumns). This numbers are in a table, and the user can fill it.
<ui:inputNumber class="slds-input" value="{! 'account.Item_' + cont + '__c'}" change="{!c.calculateSum}"/>
In the code, we want access to account, and dynamic value (changing the field). But this is not work, and error appear: Uncaught Action failed: ui:inputSmartNumber$controller$handleChangeEvent [Maximum call stack size exceeded]
Thanks
COMPONENT
<aura:attribute name="accounts" type="Account[]"/>
<aura:attribute name="numCol" type="List" default="1, 2, 3, 4, 5, 6" description="Number of columns."/>
<aura:dependency resource="markup://force:navigateToSObject" type="EVENT"/>
<ltng:require styles="/resource/slds_resource/assets/styles/salesforce-lightning-design-system.css?v=1" />
<div class="slds">
<div class="slds-page-header noborderbottom" role="banner">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
<div class="slds-media slds-no-space slds-grow">
<div class="slds-media__figure">
<lightning:icon iconName="custom:custom17" size="large" alternativeText="Indicates approval"/>
</div>
<div class="slds-media__body">
<p class="slds-text-title_caps slds-line-height_reset">Account</p>
<h1 class="slds-page-header__title slds-m-right_small slds-align-middle slds-truncate" title="My Accounts">My Accounts</h1>
</div>
<lightning:button class="slds-float_right" iconName="utility:add" onclick="{!c.addColumn}" label="Add column"/>
</div>
</div>
</div>
</div>
</div>
<div class="slds" style="overflow-x:auto;">
<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal" aura:id="myTable">
<thead>
<tr class="slds-text-heading--label" aura:id="tr_myTable">
<th scope="col" class="nobordertop" title="Account Name">
<div>Name</div>
</th>
<th scope="col" class="nobordertop" title="Estimate">
<div>Estimate</div>
</th>
<aura:iteration items="{!v.numCol}" var="cont">
<th scope="col" class="nobordertop" title="Item">
<div>Item {!cont}</div>
</th>
</aura:iteration>
<th scope="col" class="nobordertop" title="Total">
<div>Total</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.accounts}" var="account">
<tr aura:id="tr_myTable">
<td data-label="Name" title="Name">
<div><a data-record="{!account.Id}" onclick="{!c.redirectToSobject}">{!account.Name}</a></div>
</td>
<td data-label="Account Number" title="Horas estimadas">
<div><ui:inputNumber class="slds-input" value="{!account.Estimate__c}" change="{!c.calculateSum}" disabled="true"/></div>
</td>
<aura:iteration items="{!v.numCol}" var="cont">
<td data-label="{! 'Item ' + cont}" title="{! 'Item ' + cont}">
<div><ui:inputNumber class="slds-input" value="{! 'account.Item_' + cont + '__c'}" change="{!c.calculateSum}"/></div>
</td>
</aura:iteration>
<td data-label="Account Number" title="Total">
<div><ui:inputNumber class="slds-input" value="{!account.Sum__c}" change="{!c.calculateSum}"/></div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div>
CONTROLLER & HELPER
doInit : function(component, event, helper) {
helper.getAccounts(component);
},
getAccounts: function(component) {
var action = component.get("c.getAllDesgloseCoste");
action.setParams({opportunityId: component.get('v.recordId')});
//Set up the callback
action.setCallback(this, function(actionResult) {
component.set("v.accounts", actionResult.getReturnValue());
});
$A.enqueueAction(action);
},
calculateSum: function(component, event){
var allRows = component.get("v.accounts");
for(var i=0; i<allRows.length; i++){
var totalHours;
if(allRows[i].Item_1__c){
totalHours += allRows[i].Item_1__c;
}
if(allRows[i].Item_2__c){
totalHours += allRows[i].Item_2__c;
}
if(allRows[i].Item_3__c){
totalHours += allRows[i].Item_3__c;
}
if(allRows[i].Item_4__c){
totalHours += allRows[i].Item_4__c;
}
if(allRows[i].Item_5__c){
totalHours += allRows[i].Item_5__c;
}
if(allRows[i].Item_6__c){
totalHours += allRows[i].Item_6__c;
}
if(totalHours){
allRows[i].Sum__c = totalHours;
}
}
component.set("v.accounts", allRows);
},