Return to Revisions

I have done a simple component which display contacts list which involves two components

1.ContactList - Parent (Fetches the contact details)

2.ContactListItem - Child (Display individual contact detail)

Component Level Event is used to carry the contact from ContactListItem to ContactList which holds the source contact array where contact removal is done.

ContactList.cmp

<aura:component access="public" controller="ContactController">
    <aura:attribute name="contacts" type="Contact[]" access="private"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:handler name="deleteContact" event="c:deleteContactEvt" action="{!c.removeContact}" />
    <table class="borderCls">
        <tr>
            <th class="borderCls">Name</th> 
            <th class="borderCls">Phone</th>
        </tr>   
        <aura:iteration items="{!v.contacts}" var="contact">
            <c:ContactListItem contactRec="{!contact}"/>
        </aura:iteration>
    </table>
    <button onclick="{!c.addContact}">Add Contact</button>
</aura:component>

ContactListController.js

({
    doInit : function(component, event, helper) {
        var action = component.get("c.getContacts");
        action.setCallback(this, function(data) {
            console.log(data.getReturnValue());
            component.set("v.contacts", data.getReturnValue());
        });
        $A.enqueueAction(action);
    }
    ,
    addContact : function(component, event, helper){
       var contacts = component.get("v.contacts");
        var len = contacts.length;
        contacts.push({
            'Name':'Test Contact - '+len,
            'Phone':'123'+len
        });
        component.set("v.contacts",contacts);
    }
    ,
    removeContact : function(component, event, helper){
       var selCont = event.getParam("selectedContact");
       var contacts = component.get("v.contacts")
       var index = contacts.indexOf(selCont);
       if (index > -1) {
            contacts.splice(index, 1);
       }
       component.set("v.contacts",contacts);
    }
})

ContactListItem.cmp

<aura:component >
    <aura:attribute name="contactRec" type="Contact" access="private"/>
    <aura:registerEvent name="deleteContact" type="c:deleteContactEvt"/>
    <tr > 
        <td class="borderCls" >{!v.contactRec.Name}</td> 
        <td class="borderCls" >{!v.contactRec.Phone}</td>
        <td> <ui:button label="Delete" press="{!c.deleteContact}"/></td>
    </tr>
</aura:component>

ContactListItemController.js

({
    deleteContact : function(component, event, helper) {
        var event = component.getEvent("deleteContact");
        event.setParams({
            'selectedContact':component.get("v.contactRec")
        });
        event.fire();
    }
})

deleteContactEvt.evt (Component Level Event)

<aura:event type="COMPONENT" description="Delete Contact Event">
    <aura:attribute name="selectedContact" type="Contact"/>
</aura:event>

ApexController

public class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts() {
        return [Select Id, Name, Birthdate, AccountId, Account.Name, Email, Title, Phone 
                From Contact order by LastModifiedDate desc
                limit 10];
    }
}

I Hope this helps