How to change data color in UI Grid Angular

Question

|number | 1 3 4|

For example , I need to show "1" as red , "3" as green . they are in the same cell . i know i can use cell class to change the whole data color in one cell . but that 's not what i want .

Could you please give me some clues to work it out ? or is this any other way to do this ,like Angular UI or using other libraries .

Thanks

Welcome to Stack Overflow! You might want to read [how to ask a good question(stackoverflow.com/help/how-to-ask). — Gary Storey
– Gary Storey, Commented May 14, 2015 at 19:35

PaulL · Accepted Answer · 2015-05-22 20:21:54Z

2

I suspect this isn't so much a ui-grid thing, as being a general question of how you render data with in angular colours.

I would probably do this with a custom cellTemplate, and some sort of ng-style. The question is how your data is arriving in the cell - so are the 1 3 4 coming from the cell value, or do you have something else going on?

Assuming that they are in the cell value, then you'd probably need something like

<div ng-style="grid.appScope.setStyle(grid.appScope.left(COL_FIELD)>grid.appScope.left(COL_FIELD)</div>
<div ng-style="grid.appScope.setStyle(grid.appScope.mid(COL_FIELD)>grid.appScope.mid(COL_FIELD)</div>
<div ng-style="grid.appScope.setStyle(grid.appScope.right(COL_FIELD)>grid.appScope.right(COL_FIELD)</div>

Where - setStyle is a function on your scope that takes in a number and decides what style to apply to it - left gets the leftmost number from your data - mid gets the middle number from your data - right gets the rightmost number from your data

If your input structures are different then there are other ways to use cellTemplates to get the result you want.

EDIT: Based on the further information, I think you'll want to render your string as html, and then parse that html into the cell. I think this is then more a broader question of "how can angularJS render arbitrary HTML for me", and the answer may be ng-bind-html, although I don't know much about it. In theory that would let you create your markup in html, then bind that resulting markup into the cell by using ng-bind-html='COL_FIELD' in the cellTemplate.

edited May 22, 2015 at 20:21

answered May 14, 2015 at 20:20

PaulL

6,6503 gold badges37 silver badges39 bronze badges

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

3 Comments

bianbian Over a year ago

Hi . Thanks PauIL , It received data from Rest Api , Basically i want to show the difference between two rows. i am not sure how many stuff in one cell .but it supposed to be a list . i plan to show stuff(new) as green . item (deleted) as red .

PaulL Over a year ago

OK, so you're parsing the string to do a diff, and highlighting different parts of the string. I think this approach I suggested won't work because you'll need a differing number of divs or spans depending on what your result looks like.

bianbian Over a year ago

Hey , i solved it by imbedding divs into cellTemplates, actually this 's the same idea with you . thanks ! :)

Collectives™ on Stack Overflow

How to change data color in UI Grid Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related