Conditional display of style

Question

I was trying to display style conditionally based on an attribute. In the below example I am trying to display first 2 elements in the list in blue color and the other 2 elements in green color.

When I tried <li style="{!if(index<=v.two,'font-weight:bold;color:blue', 'font-weight:bold;color:green')}"> it gives compilation error The value of attribute "style" associated with an element type "li" must not contain the '<' character. Please let me know if it is possible to use <= inside style condition.

<aura:application > 
    <aura:attribute name="fruits" type="List" default="['Apple','Orange','Banana','Mango']"/>
    <aura:attribute name="two" type="Integer" default="2" />           
    <ol>        
        <aura:iteration items="{!v.fruits}" var="fruit" indexVar="index" >
            <li style="{!if(index==v.two,'font-weight:bold;color:blue', 'font-weight:bold;color:green')}">                 
                <span class="name">{!fruit} </span>
            </li>            
        </aura:iteration>
    </ol>  
</aura:application>

Answer 1

For comparing in component side, you can use Expression functions for better readability.

lessthanorequal
lessthanorequal(1,2)
Returns true if the first argument is numerically less than or equal to the second argument. <= or le

Ref - https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/expr_functions.htm

Answer 2

If you want to use certain special characters in an attribute value you must XML (or HTML) encode the character. To use "<" in this case you would simply use "&lt;" instead. NB: the documentation referenced by the other answer suggests you could even use "le" as the operator instead.

However, it would be more effective to include some CSS with your component that effectively does the following:

li { font-weight: bold; color: green; }
li:nth-child(-n+2) { color: blue; }

The second rule gets the first two "li" children from the ol and applies blue colour instead of the default green set by the first. Note that the first rule still sets bold on all the list items.