asked on

AngularJS : ng-repeat how -to conditionally format display items

Hi..
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 etc an item based on the value?

Alexandre Simões

You can just create CSS classes that match those names and apply them with ng-class.
Can actually be even with the normal class like:

<ion-item ng-repeat="fact in facts" item="fact" class="{{fact.name}}">

Open in new window

JElster

ASKER

How do I check if fact.name = 'XYZ' to use a particular class, say class = "RED".

How do I structure the item

like this?

<ion-item class="RED">

thanks

Alexandre Simões

Can't you create a class called XYZ like:

.XYZ{
color: #f00;
}

Open in new window

Alexandre Simões

You can even prefix it to avoid conflicts:

<ion-item ng-repeat="fact in facts" item="fact" class="fact_{{fact.name}}">

Open in new window

And create a class like:

.fact_XYZ{
color: #f00;
}

Open in new window

JElster

ASKER

How do I check if the fact.name is 'XYZ' ? I can't name the class XYZ... it will not match the value in fact.name.

the class for XYZ maybe Called 'Special_Class_For_XYZ'

thanks

ASKER CERTIFIED SOLUTION

Alexandre Simões

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JElster

ASKER

thanks!!!