1

I'm creating like this for example:

<div class="divfield">
<ui:inputSelect aura:id="Select1" change="{!c.someAction}" class="slds-select" value="{!v.SomeSetting.list__c}" options="{!v.someMethodOption}"/></div>
<div id="section1" ><p>some fields are in here</p></div>
<div id="section2" ><p>other fields are in here</p></div>

if section1 is selected from the ui:inputSelect, the div section1 shows up and hides when it is not selected... how are we going to write this in the controller?

2

use Aura: if to show/hide a specific div

 <aura:attribute name="section1Val" type="Boolean" default="false"/>

<aura:attribute name="section2Val" type="Boolean" default="false"/>

   <div class="divfield">



     <ui:inputSelect aura:id="Select1" change="{!c.someAction}" class="slds-select" value="{!v.SomeSetting.list__c}" options="{!v.someMethodOption}"/>
      </div>

      <aura:if isTrue="{!v.section1Val}">
       <div id="section1" ><p>some fields are in here</p>
       </div>
      </aura:if>

      <aura:if isTrue="{!v.section2Val}">
       <div id="section2" ><p>other fields are in here</p>
       </div>
      </aura:if>


    component controller:

    ({
        someAction: function(c, e, h){
      c.set("v.section1Val",true);
      c.set("v.section2Val",true);
        }
    })
  • Thank you Ajay. I added a few lines on your controller sample though: – Mae Jun 22 '18 at 8:28
  • Thank you Ajay. I added a few lines on your controller sample though: var selected = component.find("Select1").get("v.value"); if(selected == 'section1value'){ component.set("v.SelectedGlobal",true); }else{component.set("v.SelectedGlobal",false);} if(selected == 'section2value'){ component.set("v.SelectedGAU",true); }else{component.set("v.SelectedGAU",false); } – Mae Jun 22 '18 at 8:33

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.