0
  <aura:iteration items="{!v.productList}" var="item" >
                                <div class="slds-col slds-size_1-of-2 slds-p-around_small">
                                    <lightning:card title="">
                                        <p class="slds-p-horizontal_small ">
                                            <div class="slds-grid slds-gutters">
                                                <div class="slds-col slds-size_1-of-4">
                                                    <img src="{!$Resource}"/>

                                                </div>
                                                <div class="slds-col slds-size_2-of-3" >
                                                    <lightning:button variant="base" onclick="{!c.showDetails}" name="{!item.objData.Product2.Id}"  value=""><h1><b><u>{!item.objData.Product2.Name}</u></b> </h1></lightning:button> <br/>
                                                    <h2>ISBN&nbsp;:&nbsp;{!item.objData.Product2.ISBN__c}</h2>
                                                    <h2>Series&nbsp;:&nbsp;{!item.objData.Product2.S__c}</h2>
                                                    <h2>Amount&nbsp;:&nbsp;{!item.objData.UnitPrice}</h2>


                                                        <h2 >Stock Status &nbsp;:&nbsp;{!item.objData.Product2.Stock_Status__c}</h2>
                                                        <span class="slds-icon_container  slds-icon_container--circle" style="background-color:Green;">

                                                        </span>



                                                    <h2>Author&nbsp;:&nbsp;{!item.objData.Product2.Author_Name__c}</h2>

                                                    <div>
                                                        <lightning:button name="{!item.objData.Id}"   variant="brand" label="Add Cart"
                                                                          disabled="{!v.buttonDiasble}"
                                                                          value="Add Cart"
                                                                          onclick="{!c.addtoCart}"/>
                                                    </div>
                                                </div>
                                            </div>      
                                        </p>

                                    </lightning:card>
                                </div>
                            </aura:iteration>  
1

You can add the style conditionally/dynamically instead of

<span class="slds-icon_container  slds-icon_container--circle" style="background-color:Green;">

you can use like this

  <span class="slds-icon_container  slds-icon_container--circle" 
style="{!item.objData.Product2.Stock_Status__c =='High Stock' ? 'background-color:Red;': 'background-color:Green;' }">

Like this, you can make the dynamic styling. Hope this will help

| improve this answer | |
0

1 more possible way to do it by using wrapper class in apex by adding 1 more variable "StockColor" giving value with Color Name and we can iterate for productList and use it in component for showing different color.

Code:

<h2>Stock Status &nbsp;:&nbsp;{!item.objData.Product2.Stock_Status__c}</h2>
<span class="slds-icon_container  slds-icon_container--circle" style="background-color:{!item.objData.StockColor};"></span>
| improve this answer | |

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.