0

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>
1
  • 1
    You should be able to just HTML encrypt the value as index &lt;= v.two.
    – Phil W
    Aug 12, 2020 at 14:31

2 Answers 2

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

5
  • 1
    As per that documentation you can still also use "<=" or even "le" as an operator.
    – Phil W
    Aug 12, 2020 at 14:41
  • yes but we need to tweak for the symbols. And IMO functions are more readable(compare to &lt; ).
    – Ysr Shk
    Aug 12, 2020 at 14:51
  • 1
    I think "le" is readable too if you are used to XPath, e.g. "index le 2"
    – Phil W
    Aug 12, 2020 at 14:54
  • If you change your answer to not read "you need to use Expression functions" but rather "you can use Expression functions", I'll up vote.
    – Phil W
    Aug 12, 2020 at 14:55
  • yes it is readable. Actually when I was answering you wrote that unicode version, so I thought to have more readable version. Regarding the wording, happy to correct.
    – Ysr Shk
    Aug 12, 2020 at 14:56
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.