I have this below code where i am trying to first search an account name and on hit button it displays the result set.
On the button click i am also loading an child component which is displaying the id of the record.
I need the child component should get displayed once i click on the record.
How can i achieve this -
Parent Component -
<aura:component controller="SimpleAccountController">
<aura:attribute name="account" type="account[]"/>
<ui:outputText aura:id="outName" value="" class="text"/>
<ui:inputText aura:id="name" label="Enter Name:" placeholder="Your Name" />
<ui:button aura:id="button" buttonTitle="Click to see what you put into the field" class="button" label="Click me" press="{!c.getInput}"/>
<aura:iteration var="acc" items="{!v.account}">
<a onclick="{!c.accountselected}" data-recId="{!acc.Id}">
<p>{!acc.Name} : {!acc.Type} : {!acc.Industry} : {!acc.Rating}</p>
</a>
<c:HelloWorkdChildCmp selectedaccount="{!acc.Id}" />
</aura:iteration>
</aura:component>
COntroller -
({
getInput : function(cmp, evt) {
var myName = cmp.find("name").get("v.value");
var myText = cmp.find("outName");
var greet = "Hi, " + myName;
myText.set("v.value", greet);
var action = cmp.get("c.seaAcc");
action.setParams({ "s" : myName });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
cmp.set("v.account", response.getReturnValue());
//alert("From server: " + response.getReturnValue());
}
});
$A.enqueueAction(action);
},
accountselected : function(cmp, evt) {
console.log(evt.currentTarget.getAttribute("data-recId")) ;
}
})
Child component -
<aura:component >
<aura:attribute name="selectedaccount" type="String"/>
<div>Id: {!v.selectedaccount}</div>
</aura:component>
aura:if
and embed your conditional rendering section inside it.