How to add different background colour using AngularJS

Question

I want to provide a different background color for the angular ng-repeat in the table design format. If play_id is same I want to provide same background color in tr tag else another color tr tag.

JSON (https://jsfiddle.net/0sasz78n/)

{
    "play_details": [
        {
            "play_id": "15",
            "quest_id": "63",
            "question": "What will be the match result ?"
        },
        {
            "play_id": "8",
            "quest_id": "61",
            "question": "Which of this batswan will score higher ?"
        },
        {
            "play_id": "8",
            "quest_id": "59",
            "question": "What will be the match result ?"
        }
    ]
}

HTML code:

<table><tr ng-repeat="single_Play in all_Play_details">
    <td>{{$index + 1}}</td>
    <td>{{single_Play.play_id}}</td>
    <td>{{single_Play.quest_id}}</td>
    <td>{{single_Play.question}}</td>
</tr></table>

JS code:

$scope.all_Play_details = response.data.play_details;

{"play_details":[{"play_id":"8","quest_id":"61","question":"Which of this batswan will score higher ?"},{"play_id":"8","quest_id":"59","question":"What will be the match result ?"}]} — Rijo
– Rijo, Commented Jan 2, 2017 at 10:51
You could use ng-style/ng-class, but before that include backgroundColor property in each element of your array — Pankaj Parkar
– Pankaj Parkar, Commented Jan 2, 2017 at 10:52
the play_id will change randomly, then how can provide ng-class — Rijo
– Rijo, Commented Jan 2, 2017 at 10:54

Pascal · Accepted Answer · 2017-01-02 10:56:29Z

1

edit: ok, Rouk was faster ;)

I would suggest to use ng-class and add something like the following into your ng-repeat tag.

ng-class="{'highlightedCell' : play_details.play_id == currentID, 'diffentColoredCell' : play_details.play_id != currentID"}

and of course create the appropriate css-class.

answered Jan 2, 2017 at 10:56

Pascal

2,7103 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roux · Accepted Answer · 2017-01-02 11:21:03Z

1

You can use ng-class for that. https://docs.angularjs.org/api/ng/directive/ngClass

Just create some classes with different background color, then add a condition in ng-class.

table><tr ng-repeat="single_Play in all_Play_details" ng-class="{'YOURCSSCLASS': single_Play.play_id == 8}>
...
 </tr></table>

Something like that should work.

To really fit your need (having the same background-color for every ID), you could also pass a function to ng-class. In this function, add some logic and return the good CSS class. (logic could be to add have a scope array of object, like [{8: 'GREEN'}, {12: 'YELLOW'}] and everytime you go in this function, you add an object if the ID doesn't exist, and you associate a random color. If the ID already exist, you simply return the CSSproperty (like GREEN, fir play_ID 8)

edited Jan 2, 2017 at 11:21

answered Jan 2, 2017 at 10:51

Roux

3132 silver badges17 bronze badges

8 Comments

Rijo Over a year ago

can u please tell how to add that condition

Rijo Over a year ago

main thing play_id change randomly , then how can provide statically play_id == 8

Roux Over a year ago

yeah, it was as an example. If play_id change randomly and is not in a range, you can add a background-color property to your JSON as Pankaj Parkar suggested.

Roux Over a year ago

However, setting a background-color depending on a random ID is kinda weird, if I can give my opinion.

Rijo Over a year ago

is it possible to write like this ng-class="{'YOURCSSCLASS': single_Play.play_id =='next_play_id'} how to get this 'next_play_id'

|

Jitendra gupta · Accepted Answer · 2017-01-02 11:21:10Z

0

Just do like this :

 <table>
   <tr ng-repeat="single_Play in all_Play_details">
     <td>{{$index + 1}}</td>
     <td ng-class="{'background-color: yellow':single_Play.quest_id === 2 || single_Play.quest_id === 3 ,'background-color: red':single_Play.quest_id === 4}">{{single_Play.play_id}}</td>
     <td>{{single_Play.quest_id}}</td>
     <td>{{single_Play.question}}</td>
   </tr>
 </table>

Like this you can writes ng-class cases . hope it will help you

edited Jan 2, 2017 at 11:21

answered Jan 2, 2017 at 11:00

Jitendra gupta

1088 bronze badges

Collectives™ on Stack Overflow

How to add different background colour using AngularJS

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related