Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 415
  • Last Modified:

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?
0
JElster
Asked:
JElster
  • 4
  • 3
1 Solution
 
Alexandre SimõesManager / Technology SpecialistCommented:
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

0
 
JElsterAuthor Commented:
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
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Can't you create a class called XYZ like:
.XYZ{
color: #f00;
}

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Alexandre SimõesManager / Technology SpecialistCommented:
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

0
 
JElsterAuthor Commented:
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
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
That's my point.
To make it easier to maintain it should have the same name, otherwise you have to create a function in the controller that does the mapping:
$scope.getFactClass = function(fact){
    var name = fact.name;
    
    switch{
        case 'XYZ':
            return 'Special_Class_For_XYZ';
        case 'ABC':
            return 'SomeOtherClassForABC';
        default:
            return '';
        
    }
}

Open in new window

and use it like:
<ion-item ng-repeat="fact in facts" item="fact" class="{{getFactClass(fact)}}">

Open in new window

0
 
JElsterAuthor Commented:
thanks!!!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now