0

https://i.stack.imgur.com/y3tg6.png

Please click the above link to view the image . The part circled in RED needs to be changed after clicking in the checkbox 'Mark For Deletion'. Right now my issue is this that values circled in RED are getting changed for those card also which is not selected.i.e.for all the cards. I want to change the value for the selected card only through checkbox. Below is my code. Just missing some small point i guess. I am using boolean flag attribute to show and hide on checkbox select.

    Component :-
    
         <aura:iteration items="{!v.IntIndex}" var="item">
    
            <lightning:layoutItem flexibility="auto" padding="around-small">
    
                <div class="custom-box">
                    <lightning:card footer="Card Footer" title="Hello">
                        <aura:set attribute="actions">
             <lightning:input type="checkbox"  onclick="{!c.onCheck}" value="{!item.Id}" label="Mark for Deletion" aura:id="deleteContact" />
                       </aura:set>
                     <div class="slds-p-horizontal_small" id="{!item.Id}">
                          <aura:if isTrue="{!v.flag}">
                              The Record Name is {!item.Name}
                         </aura:if>
                         <aura:if isTrue="{!!v.flag}">
                            The Selected Record Name is {!item.Name}
    
                         </aura:if>
                     </div>
                 </lightning:card>
    
                
                </div>
            </lightning:layoutItem>
             </aura:iteration>
JS Controller :-
    onCheck : function(component, event, helper) {
        var contactsToDelete = component.find("deleteContact");
                   for(var i=0;i<contactsToDelete.length;i++) {
                // If contact has delete checkbox checked, change the body text to something else
        if(contactsToDelete[i].get("v.checked")){            
                        component.set("v.flag",false);
                   }

}
0

You need one flag per card, not just one global value.

Change:

<aura:if isTrue="{!v.flag}">

...

<aura:if isTrue="{!!v.flag}">

To:

<aura:if isTrue="{!item.flag}">

...

<aura:if isTrue="{!!item.flag}">

And in your controller:

onCheck: function (component, event, helper) {
    var items = component.get("v.IntIndex");
    var contactsToDelete = component.find('deleteContact');
    for (var i = 0; i < contactsToDelete.length; i++) {
        // If contact has delete checkbox checked, change the body text to something else
        items[i].flag = !contactsToDelete[i].get('v.checked');
    }
    component.set("v.IntIndex", items);
}
| improve this answer | |
  • I think we are almost there,just that now values are getting displayed for all the lightning card by default as 'The Selected Record is 'xyz' '.Means even before the clicking on checkbox its giving me the value after getting checked. – SFDC LWC Jul 21 at 18:40
  • @sfdcfox...here i must say that flag is not any field in the list 'IntIndex'. I guess in the above code you are assuming it as a field. It's just an attribute. Do you think that i need to create a field in the object of the boolean data type and then go ahead with your solution. Is my understanding correct? – SFDC LWC Jul 21 at 18:50
  • @SFDCLWC After loading the data, add it as a "field" on each item. This is an important step, as you won't be able to do it any other way. – sfdcfox Jul 21 at 19:04
  • @sfdcfox....Finally i found a workaround for this.Yes, u were right,w need to add a field on each item. Have updated the answer as per your valuable sugestion – SFDC LWC Jul 22 at 18:57
0

As per the suggestion of @sfdcfox ,one flag__c per card was used, not just one global value. Here flag__c picklist was created having two values 'Deleted' and 'UnDeleted'. For selected Checkbox card, the value 'Deleted' will display.

    Change:
              <aura:iteration items="{!v.IntIndex}" var="item">
    
            <lightning:layoutItem flexibility="auto" padding="around-small">
    
                <div class="custom-box">

                        <lightning:card footer="Card Footer" title="Hello">
                            <aura:set attribute="actions">
                 <lightning:input type="checkbox"  onclick="{!c.onCheck}" value="{!item.Name}" label="Mark for Deletion" aura:id="deleteContact" />
                           </aura:set>
                         <div class="slds-p-horizontal_small" id="{!item.Id}">
                              
                               The Selected Record is&nbsp;{!item.flag__c}
                         </div>
                     </lightning:card>
                    </div>
            </lightning:layoutItem>
              </aura:iteration>
                    
    And in your controller:
    
        onCheck: function (component, event, helper) {
            var items = component.get("v.IntIndex");
            var contactsToDelete = component.find('deleteContact');
            for (var i = 0; i < contactsToDelete.length; i++) {
            if(contactsToDelete[i].get("v.checked")){
                   itemslst[i].flag__c='Deleted';            
                }         
                          component.set("v.IntIndex", itemslst);
        }
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.