Select your Language

Handle nested if in lightning component

 For Rendering the component if you are using aura if  as below:


<aura:component>

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

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

<aura:if Istrue="{!v.attribute3}">

<aura:if Istrue="{!v.attribute4}">

.................

....

..........

<aura:if Istrue="{!v.attributeN}">

</aura:if>

Note: It is not possible is salesforce

========

We can use in <aura:set attribute="else">

<aura:component>

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

    <aura:set attribute="else">

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

            <aura:set attribute="else">

                <aura:if Istrue="{!v.attribute3}">item3

                    <aura:set attribute="else">

                        <aura:if Istrue="{!v.attribute4}">item4

                        </aura:if>

                    </aura:set>

                </aura:if>

          </aura:set>

          </aura:if>

     </aura:set>

</aura:if>

<aura:component">


THIS WILL WORK

=======================================

You can also use with div tag


<aura:component >
<aura:attribute name="displayedSection" type="string" default=""/>
<div>
<b> This component is going to explain div slds show-hide functionality</b>
</div>
<lightning:button label="Display Section 1" variant="brand" onclick="{!c.displaySection1}"/>
<lightning:button label="Display Section 2" variant="brand" onclick="{!c.displaySection2}"/>
<div aura:id="firstsection" class="{!if(v.displayedSection == 'section1','slds-show','slds-hide')}">
<div>
<b> First Div Section</b>
</div>
<lightning:input type="text" label="Section 1 input" name="sec1" value="Inside Section 1" aura:id="sec1value"/>
</div>
<div aura:id="secondsection" class="{!if(v.displayedSection == 'section2','slds-show','slds-hide')}">
<div>
<b> Second Div Section</b>
</div>
<lightning:input type="text" label="Section 2 input" name="sec1" value="Inside Section 2" aura:id="sec2value"/>
</div>
</aura:component>


REF:https://www.sfdcstuff.com/2017/08/auraif-vs-slds-showhide-which-one-to.html






No comments:

Post a Comment