As we all know Lightning is on boom now. With every release we get new feature and functionality on Lightning. Many of us are just realized how much it is important to learn lightning so now I will share some small code sample related to Lightning in upcoming using them you can get a quick start your Lightning study. i also recommend you to check my previous post to get the basic Idea.
Today I will share a simple multi select component where we will pass data between two components.
Lightning Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component > | |
| <aura:attribute name="allvalues" type="List" /> | |
| <aura:attribute name="selValues" type="List" /> | |
| <aura:attribute name="selectedValue" type="String"/> | |
| <aura:attribute name="unselectedValue" type="String"/> | |
| <aura:handler name="init" value="this" action="{!c.init}" /> | |
| <div class="slds-page-header"> | |
| <div class="slds-media"> | |
| <div class="slds-media__figure"> | |
| </div> | |
| <div class="slds-media__body"> | |
| <h1 class="slds-page-header__title slds-truncate slds-align-middle" title="Select The value from one list and pass it in another"> | |
| Select The value from one list and pass it in another | |
| </h1> | |
| <p class="slds-text-body_small slds-line-height_reset"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <br/><br/> | |
| <lightning:select name="mySelect" label="Select a Number:" value="{!v.selectedValue}" aura:id="mySelect"> | |
| <option value="">choose one…</option> | |
| <aura:iteration items="{!v.allvalues}" var="allkey" > | |
| <option value="{!allkey}">{!allkey}</option> | |
| </aura:iteration> | |
| </lightning:select> | |
| <br/><br/> | |
| <lightning:button variant="brand" label="Add" onclick="{! c.add }" /> | |
| <lightning:button variant="destructive" label="Return" onclick="{! c.returnNumber }" /> | |
| <br/><br/> | |
| <lightning:select name="selectItem" label="Return a Number" value="{!v.unselectedValue}" aura:id="unSelect"> | |
| <option value="">choose one…</option> | |
| <aura:iteration items="{!v.selValues}" var="allkey" > | |
| <option value="{!allkey}">{!allkey}</option> | |
| </aura:iteration> | |
| </lightning:select> | |
| </aura:component> |
Controller JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| init : function(component, event, helper) { | |
| var recarr = []; | |
| for(var i =1 ; i < 6 ; i++) | |
| recarr.push(i); | |
| component.set("v.allvalues",recarr); | |
| }, | |
| add : function(component, event, helper) { | |
| var recarr = component.get("v.allvalues"); | |
| var selval = component.get("v.selectedValue"); | |
| var selarr = component.get("v.selValues"); | |
| var index = recarr.indexOf(parseInt(selval)); | |
| if(index > –1){ | |
| recarr.splice(index, 1); | |
| selarr.push(parseInt(selval)); | |
| component.set("v.allvalues",recarr); | |
| component.set("v.selValues",selarr); | |
| } | |
| }, | |
| returnNumber : function(component, event, helper) { | |
| var recarr = component.get("v.allvalues"); | |
| var selval = component.get("v.unselectedValue"); | |
| var selarr = component.get("v.selValues"); | |
| var index = selarr.indexOf(parseInt(selval)); | |
| if(index > –1){ | |
| selarr.splice(index, 1); | |
| recarr.push(parseInt(selval)); | |
| component.set("v.allvalues",recarr); | |
| component.set("v.selValues",selarr); | |
| } | |
| } | |
| }) |
As from code you can easily get the idea that I have used component.get and have passed the attribute value to get the selected value and add/ remove the value from list. You can find the complete code here. Play with it and let me know if you face any issue.
Happy programming 🙂