I have a HTML page with a table that is created using Angular ng-repeat
and a controller that fetches JSON data.
Here is the simplified version of my table:
product price
------- -----
ABC $1.33
EDF $2.00
And here is the angularJS code inside my HTML page:
<table class="table" ng-controller="someCtrl">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products">
<td>{{p.productName}}</td>
<td>{{p.price}}</td>
</tr>
</tbody>
</table>
Is it possible to change the text color of p.price based on its value? for example, I would like to modify the price value with the color red if p.price > 1.5
I have tried the following answer, but it only works when I hard-coded the number instead of dynamic generating number using ng-repeat
:
Can I make a table cell have a different background color if the value =< a particular number with jquery or PHP?
I have a HTML page with a table that is created using Angular ng-repeat
and a controller that fetches JSON data.
Here is the simplified version of my table:
product price
------- -----
ABC $1.33
EDF $2.00
And here is the angularJS code inside my HTML page:
<table class="table" ng-controller="someCtrl">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="p in products">
<td>{{p.productName}}</td>
<td>{{p.price}}</td>
</tr>
</tbody>
</table>
Is it possible to change the text color of p.price based on its value? for example, I would like to modify the price value with the color red if p.price > 1.5
I have tried the following answer, but it only works when I hard-coded the number instead of dynamic generating number using ng-repeat
:
Can I make a table cell have a different background color if the value =< a particular number with jquery or PHP?
- How did you try that linked answer? Show us more code. (It can be done, yes.) – doldt Commented Apr 15, 2015 at 7:04
- Hi i think you can find an answer from this link... stackoverflow./questions/18745001/… – phpfresher Commented Apr 15, 2015 at 7:08
- @phpfresher thanks! I actually checked the answer but did not quite get it the first time. but it is what I need for sure! thanks ! – yla Commented Apr 15, 2015 at 7:29
2 Answers
Reset to default 7Instead of jQuery, you can achieve this by ng-class
.
<td><span ng-class="p.price > 1.5 ? 'price-red' : ''">{{p.price}}</span></td>
CSS
.price-red {
// apply your code like
color: red;
}
A cleaner way to do it would be using the ng-class directive in angularjs. For the tag, you can optionally give a css class depending on the value of an expression as follows:
<td ng-class="{ 'css-cls-for-color1' : p.price > 3000, 'css-cls-for-color2' : p.price <= 3000}"> </td>