How to combine two aura ifs into one?

Question

I have been trying to to simplify a nested <aura:if isTrue> into a single line. I thought I could wrap this with an or(statement1,statement2) but I think I'm missing something. The expected functionality works with the nested statement, the functionality is to only show option 'y' when 'x' is selected beforehand.

<aura:if isTrue="{!or(and(v.object.field__c == 'x' , item.label == 'y'), item.label != 'y')}">
      <aura:if isTrue="{!or(and(v.object.field== 'x' , item.label == 'z'), item.label != 'z')}">
                <option selected = "{!item.selected}" value="{!item.value}">{!item.label}</option>
      </aura:if>
</aura:if>

My attempt

<aura:if isTrue="{or(!or(and(v.object.field__c == 'x' , item.label == 'y'), item.label != 'y'),!or(and(v.object.field== 'x' , item.label == 'z'), item.label != 'z'))}">
                <option selected = "{!item.selected}" value="{!item.value}">{!item.label}</option>
</aura:if>

Attempt with And

 and((!or(and(v.object.field__c == 'x',item.label == 'y'), item.label != 'y')),(!or(and(v.object.field__c == 'x',item.label == 'z'), item.label != 'z')))
    

Any help would be greatly appreciated.

Answer 1

Personally I would use the Apex/Java/C++/C style infix OR and AND operators (|| and &&) instead of the or and and functions (the downside being that & is a special character in XML and therefore must be encoded as &).

Try something like:

<aura:if isTrue="{!((v.object.field__c == 'x' &amp;&amp; item.label == 'y') ||
                    (item.label != 'y')) &amp;&amp;
                   ((v.object.field == 'x' &amp;&amp; item.label == 'z') ||
                    (item.label != 'z'))}">
    <option selected = "{!item.selected}" value="{!item.value}">{!item.label}</option>
</aura:if>

If sticking with the "operator functions", you would need something like:

<aura:if isTrue="{!and(or(and(v.object.field__c == 'x', item.label == 'y'),
                          (item.label != 'y')),
                       or(and(v.object.field == 'x', item.label == 'z'),
                          (item.label != 'z')))}">
    <option selected = "{!item.selected}" value="{!item.value}">{!item.label}</option>
</aura:if>

This is, IMHO, much harder to read and understand (and I can't even guarantee I converted it correctly either)!

BTW, note how I have formatted to align the two sides of each operator or the two parameters for each function. It makes it easier to read and understand in general so I encourage you to adopt that sort of approach in this sort of case.