I'm working with real time application to show current gold market rates. I'm getting service by ajax and convert the value and displaying into tables. Currently create dynamically this table and append into div. So i can compare with table row data with currently getting value and can set price up/ down or normal color value like bellow,
var tableid = document.getElementById("ratetable");
for(var i=1;i<tableid.rows.length;i++) {
selling_rate = data.Commodities.Commodity.selling_rate;
buying_rate = data.Commodities.Commodity.buying_rate;
if(tableid.rows[i].cells[1].innerHTML > selling_rate) {
tableid.rows[i].cells[1].style.color = "#FFFFFF"; //Red
tableid.rows[i].cells[1].style.background = "#FF0000";
} else if(tableid.rows[i].cells[1].innerHTML < selling_rate) {
tableid.rows[i].cells[1].style.color = "#ffffff"; //Green
tableid.rows[i].cells[1].style.background = "#2636f2";
} else {
tableid.rows[i].cells[1].style.color = "#000000"; //black
tableid.rows[i].cells[1].style.background = "";
}
tableid.rows[i].cells[1].innerHTML = selling_rate;
}
For this i used bellow code to create table in angular js
<table width="480" border="0" cellpadding="0" cellspacing="0" class="rate-table" id="ratetable">
<tr class="table-title">
<td width="297">DESCRIPTION</td>
<td width="183">PRICE</td>
</tr>
<tr ng-repeat="commodity in commodityrate.Commodity" ng-class-odd="'oddrow'" ng-class-even="'silver'">
<td width='297'>{{commodity.name}}</td>
<td width='183'>{{commodity.selling_rate}}</td>
</tr>
</table>
But I need to check value (compare new value with previous value) and update color code. for this i tried like
ng-class="{highcolor: $scope.text>commodity.selling_rate, lowcolor: $scope.text<commodity.selling_rate, normalcolor: $scope.text==commodity.selling_rate}"
But this didn't work, how to do this in angular js. Is there any way to do this dynamic created value to compare by angular $watch. Please any one help me.