I'm using JSON binding to the following -
a fact contains a name so - fact.name = 'ABC', fact.name ='XYZ'
ion-list
ion-item ng-repeat="fact in facts" item="fact"
if fact contains ABC I want to show the item like this.
use ABC class and show it in BOLD
if fact contains XYZ I want to show the itme like this.
use XYZ class and show in RED
and so on
How do I conditionally show / format a list item based on the value?
You can apply your css using ng-class:
<li ng-class="{'ABC': fact.name == 'ABC', 'XYZ': fact.name == 'XYZ'}></li>
If you wanna apply css if the fact.name contains a string:
<li ng-class="{'ABC': fact.name.indexOf('ABC') > -1, 'XYZ': fact.name.indexOf('XYZ') > -1}></li>
If you are sure that your css class name and the fact.name matches always, you can in fact directly bind it to the class attribute.
<li class="{{fact.name}}" style="{{ fact.name == 'ABC' ? 'font-weight:bold':'color:red'}}"></li>
Note: It is not a good practice to have styles go separately when you have css class defined. I would prefer having these styles moved to the css classes appropriately.
