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>
index <= v.two
.