1

I have 2 lists. First is all my objects. Second - selected object (I use "Select" button to add my obj to second list but without deliting it in the first list). I can also delete the objects from the second list. But how can I change the "Select" button's style from first list if I delete the element from second list?

cmp:

<aura:attribute name="objs" type="Obj__c[]"/>
<aura:attribute name="selectedObjs" type="Obj__c[]"/>

<div class="slds-grid slds-gutters divMain">
    <div class="slds-col div1Column">
        <aura:iteration items="{!v.objs}" var="obj" indexVar="index">     
            <lightning:layout multipleRows="true" class="layoutBigCardsColumn">
                <div data-index="{!index}" aura:id="divDetailsId">
                    <p><b>about {!obj.Name}</b></p>
                    //I need to change style of this btn:
                    <lightning:button aura:id="buttonSelectId" label="Select" name="{!obj}" class="buttonSelect" onclick="{!c.select}"/>
                </div>
            </lightning:layout>
        </aura:iteration>
    </div>

    <div class="slds-col div2Column">
        <lightning:layout horizontalAlign="center" multipleRows="true" class="layoutCardsColumn">
            <span class="selectedJobsTop">
                <aura:if isTrue="{!v.selectedObjs != null}">
                    <aura:iteration items="{!v.selectedObjs}" var="selectedObj" indexVar="index">
                        <div class="slds-panel__body layoutLittleCards">
                            <p>
                                <b>{!selectedObj.Name}</b>
                                <span class="spanButtonClose">
                                    //When I click "close", I need to change the style of needed "Select" btn:
                                    <lightning:buttonIcon name="{!index}" iconName="utility:close" onclick="{!c.deselect}"/>
                                </span>
                            </p>
                        </div>
                    </aura:iteration>
                </aura:if>
            </span>
        </lightning:layout>
    </div>
</div>

Needed functions from js:

select : function(component, event, helper) {
    let selectedObjs = component.get("v.selectedObjs");
    selectedObjs.push(event.getSource().get("v.name"));
    component.set("v.selectedObjs", selectedObjs);

    let selectButton = event.getSource();   
    selectButton.set("v.disabled", true);
    selectButton.set("v.class", "changeButtonColor");
},

deselect : function(component, event, helper) {
    let objs = component.get("v.objs");
    let selectedObjs = component.get("v.selectedObjs");

    let infos = component.find("buttonSelectId");

    let toDeletIndex =  event.getSource().get("v.name");
    selectedObjs.splice(toDeletIndex, 1);        
    component.set("v.selectedObjs", selectedObjs);

    for(let j=0; j<objs.length; j++){
        for (let i=0; i<selectedObjs.length; i++){
            if((objs[j].Id) == (selectedObjs[i].Id)){
                //I can get here currend array of selected objs,
                //but how can I change style of "Select" btn of removed (from here) obj?
                console.log(selectedObjs[i].Id);
            }           
        }
    }
},

Your Answer

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

Browse other questions tagged or ask your own question.