Use multiple conditions in aura:if on lightning component
Prerequisites : basic understanding of Lightning Components.
aura:if evaluates the isTrue expression on the server and instantiates components in either it’s body or else attribute. Only one branch is created and rendered. Switching condition unrenders and destroys the current branch and generates the other
In aura:if tag we can not use [&& ,AND ,||, OR] operator for use multiple conditions in isTrue attribute, but….
we can use logical Functions in aura:if tag like or(), and() . in this sample code we can see how to use multiple Boolean conditions in aura:if tag.
Use Multiple conditions sample code :
component [sample.cmp]
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<aura:component > <aura:attribute name="ValueOneisTrue" type="boolean" default="true"/> <aura:attribute name="ValueTwoisFalse" type="boolean" default="false"/> <aura:attribute name="ValuethreeisTrue" type="boolean" default="true"/> <aura:attribute name="ValueFourisFalse" type="boolean" default="false"/> <!--aura:if sample --> <aura:if isTrue="{!and(v.ValueOneisTrue, v.ValuethreeisTrue)}" > <div style="padding:15px; background-color:LightBlue"> and ==> this div show because both attribute is true </div> </aura:if> <!--aura:if with aura:set sample--> <aura:if isTrue="{!or(v.ValueFourisFalse, v.ValueTwoisFalse)}" > <div style="padding:15px; background-color:GreenYellow"> or ==> this div show because one attribute is true </div> <aura:set attribute="else"> <div style="padding:15px; background-color:GreenYellow"> or ==> this aura:set div show because both attribute is false </div> </aura:set> </aura:if> <!--aura:if with nested and condition--> <aura:if isTrue="{!or(and(v.ValueOneisTrue, v.ValuethreeisTrue) , v.ValueTwoisFalse ) }" > <div style="padding:15px; background-color:LightGreen "> nested condition div show because in statment 1 of or()condition returns true. </div> </aura:if> </aura:component> |
TestApp.app
|
1 2 3 4 5 6 7 8 |
<aura:application > <c:sample/> <!-- here c: is org. namespace prefix--> </aura:application> |
Output-:
Bravo!! Like our facebook page for new post updates.
(Visited 60,522 times, 1 visits today)
2 comments
Is there a way to check multiple values without hard coding the values
<aura:if isTrue=”{!(v2.Name == ‘Q-003’ || v2.Name == ‘Q-005’ || v2.Name == ‘Q-006’ || v2.Name == ‘Q-009’|| v2.Name == ‘Q-016’ || v2.Name == ‘Q-017’|| v2.Name == ‘Q-023’ || v2.Name == ‘Q-024’)}” >
@RKK Yes, but the place to do that check isn’t within the aura:if ‘isTrue’ parameter.
Instead, within the Javascript controller, create a list holding all your hardcoded values, compare v2.Name to that list, and store the result of the comparison as a boolean attribute on your component. Then your aura:if isTrue check can be directly on that boolean