Solved

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

Posted on 2015-01-06
7
331 Views
Last Modified: 2015-01-06
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
Comment
Question by:JElster
  • 4
  • 3
7 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40533726
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
 
LVL 1

Author Comment

by:JElster
ID: 40533746
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40533761
Can't you create a class called XYZ like:
.XYZ{
color: #f00;
}

Open in new window

0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40533763
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
 
LVL 1

Author Comment

by:JElster
ID: 40533778
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
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40533809
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
 
LVL 1

Author Closing Comment

by:JElster
ID: 40533835
thanks!!!
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question