How to conditionally render rows in iteration lightning component

Question

I have a lightning iteration component that shows several information on accounts in a row. One of the columns allows the user to choose a lookup( I use a custom lookup component) value to edit the account. I have another row that has a checkbox. What I am trying to accomplish is if the user clicks the checkbox, the column with the lookup value gets greyed out and is not allowed for editing. I tried to do this with a boolean attribute that gets turned to false if the checkbox is checked and then use an aura if to display the custom lookup component in the column but this ends up disabling the entire column. I need the row to have that column be disabled in THAT specific row is the checkbox in that row is checked. Below is code.

<aura:iteration var="account" items="{!v.Accounts}" indexVar="idx">
    <tr class="slds-hint-parent">
        <th role="gridcell">
            <div class="slds-truncate" title="Acc"><a href="{!'/'+ account.Id }" target="_blank" tabindex="-1">{!account.Name}</a></div>
        </th>
        <td role="gridcell">
            <lightning:layoutItem size="4">
                <aura:if isTrue = "{!v.show}">
                    <c:customLookupComp objectAPIName="Master_Customer__c"
                        iconName="standard:account"
                        selectedRecord="{!v.selectedLookUpRecord}"
                        label="Search"
                        fieldAPIName="Id"
                        resultField1="Master_Customer__c"
                        resultField2=""
                        showlabel="false"
                        />
                    <force:inputField  value="{!v.selectedLookUpRecords}"/>
                </aura:if>
            </lightning:layoutItem>
        </td>
        <td role="gridcell">
            <div class="slds-truncate" title="Parent acc"><a href="{!'/'+ account.parentid }" target="_blank" tabindex="-1">{!account.Parent.Name}</a></div>
        </td>
        <td role="gridcell">
            <label class="slds-checkbox--button__label" data-record="{!idx}"  onclick="{!c.masterCustomerCheckbox}">
                <ui:inputCheckbox aura:id="button1" />
            </label>
        </td>
    </tr>
</aura:iteration>

CONTROLLER

onLookupSelected : function(component, event) {
    console.log('in lookupselected');
    var selectedAccountGetFromEvent = event.getParam("selectedRecord");
    console.log('in lookupselected2');
    var recordsList = component.get("v.selectedLookUpRecords");
    recordsList.push(selectedAccountGetFromEvent);
    //component.set("v.selectedLookUpRecords" , selectedAccountGetFromEvent); 
    console.log('in lookupselected3');
    var record = component.get("v.selectedLookUpRecords");


},
masterCustomerCheckbox : function(component, event, helper) {
    console.log('in myfunc');
    //var show = component.get("v.show");
    //console.log('before show' + show);
    //component.set("v.show", false);
    //console.log('show ' + show);
    var selectedItem = event.currentTarget; // Get the target object
    var index = selectedItem.dataset.record; // Get its value i.e. the index This is because in the iterration i used index on it
    var selectedacc = component.get("v.Accounts")[index]; // Use it retrieve the stored record
    console.log('Acc Id ' + selectedacc.Id);

    var masterCustomersToCreate = component.get("v.masterCustomerToCreate");
    masterCustomersToCreate.push(selectedacc);

    console.log('this is the master customer to create' + masterCustomersToCreate);

    var action = component.get('c.createMasterCustomers');

    action.setParams({
        'accList': masterCustomersToCreate
    })

    action.setCallback(this, function(response) {
        //store state of response
        var state = response.getState();
        if (state === "SUCCESS") {
            //alert('Record Created');
        }
    });
    $A.enqueueAction(action);



},

Answer 1

So, it looks like you're trying to hide the custom lookup component in the row that's selected. (I had some trouble following your description, so let me know if that isn't correct!)

Right now, you're using the same attribute (v.show) to display/hide -all- of the custom lookup components. You need a way to identify the component in the selected row.

You're already using the idx value to identify each row's checkbox. Instead of using a boolean attribute to control the visibility of the lookup, use an integer to store the idx of the selected row.

Then, you can use one of two options:

(1) Change the logic in the aura:if statement to show nothing if the row is selected, and move the customLookupComp into an else block:

Assuming your integer attribute is named "selectedRowNum," the value in your aura:if statement would change to "{!v.selectedRowNum == idx}".

<aura:if isTrue = "{!selectedRowNum == idx}">
<!-- show nothing if the row is selected -->

    <aura:set attribute="else">
    <!-- otherwise, show the component -->

        <c:customLookupComp objectAPIName = "Master_Customer__c"
                                 iconName = "standard:account"
                           selectedRecord = "{!v.selectedLookUpRecord}"
                                    label = "Search"
                             fieldAPIName = "Id"
                             resultField1 = "Master_Customer__c"
                             resultField2 = ""
                                showlabel = "false"
        />
        <force:inputField  value="{!v.selectedLookUpRecords}"/>
    </aura:set>
</aura:if>

Populate the selectedRowNum value in your masterCustomerCheckbox function, and you should be all set.

(2) Use CSS instead of aura:if to show/hide the component:

<div class="{!IF(NOT(selectedRowNum == idx), 'slds-show', 'slds-hide')}">
    <c:customLookupComp objectAPIName = "Master_Customer__c"
                             iconName = "standard:account"
                       selectedRecord = "{!v.selectedLookUpRecord}"
                                label = "Search"
                         fieldAPIName = "Id"
                         resultField1 = "Master_Customer__c"
                         resultField2 = ""
                            showlabel = "false"
    />
    <force:inputField  value="{!v.selectedLookUpRecords}"/>

</div>