I have a parent component which iterates over a child component and has a save button. Parent.cmp:
<aura:attribute name="casAgentList" type="Availability_Of_CAS_OneMDCS__c[]"/>
...
<tbody>
<aura:iteration items="{!v.casAgentList}" var="item">
<c:childComp appo="{!item}"/>
<br/>
</aura:iteration>
</tbody>
...
<lightning:button variant="brand" onclick="{! c.saveRecord }" > Save </lightning:button>
Next the child component displays a table. child cmp:
<aura:attribute name="appo" type="Availability_Of_CAS_OneMDCS__c"/>
<aura:attribute name="availableList" type="List"/>
<aura:attribute name="starttimeList" type="List"/>
<aura:attribute name="endtimeList" type="List"/>
<aura:attribute name="isstartdisable" type="Boolean" default="true"/>
<aura:attribute name="isenddisable" type="Boolean" default="true"/>
<aura:attribute name="iscommentdisable" type="Boolean" default="true"/>
<aura:handler name="init" value="{!this}" action="{!c.myAction}"/>
<tr>
<td>
{!v.appo.CAS_Team_OneMDCS__r.Name}
</td>
<td style="padding-right: 5px;">
<lightning:select name="{!v.appo.Id}" onchange="{!c.dorefresh}" aura:id="firstpicklistid">
<Option text="--None--" value="--None--" disabled="true"/>
<option value="{!v.appo.Availability__c}" text="{!v.appo.Availability__c}"> </option>
<aura:iteration items="{!v.availableList}" var="inneritem">
<aura:if isTrue="{! notequals(v.appo.Availability__c,inneritem) }">
<option value="{!inneritem}" text="{!inneritem}"></option>
</aura:if>
</aura:iteration>
</lightning:select>
</td>
...
Next the child controller has the definition for myaction and do refresh function. child controller:
myAction : function(component, event, helper) {
console.log('Offtimeselection cmp 2');
var action2 = component.get("c.getselectOptions");
action2.setParams({
"field": 'Availability__c'
});
action2.setCallback(this, function(response) {
if (response.getState() == "SUCCESS") {
component.set("v.availableList",response.getReturnValue());
}
});
$A.enqueueAction(action2);
var action3 = component.get("c.getselectOptions");
action3.setParams({
"field": 'Start_Time__c'
});
...
dorefresh : function(component, event, helper) {
var checkval = component.find("firstpicklistid").get("v.value");
console.log('checkval'+checkval);
if(checkval != 'Partial Day'){
component.set("v.isstartdisable",true);
component.set("v.isenddisable",true);
}
else{
component.set("v.isstartdisable",false);
component.set("v.isenddisable",false);
}
...
The issue is, how do I save the values in the child component when the save button is clicked on the parent component? I tried using events but since the parent component is iterating on the child component, the event will fire multiple times taking too much time. I need to store the data of the child component in a map or list and then push everything together to the database. Any ideas or help would be appreciated.