如何在angularjs中绑定值之前获取先前的值并与新值进行比较

Question

我正在使用实时应用程序来显示当前的黄金市场价格。我通过 ajax 获得服务并将值转换并显示为表格。目前动态创建此表并附加到 div 中。所以我可以与当前获得价值的表格行数据进行比较，并可以设置价格上涨/下跌或正常颜色值，如下所示，

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;

}

为此，我使用以下代码在 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>

但我需要检查值（将新值与以前的值进行比较）并更新颜色代码。为此我尝试过

ng-class="{highcolor: $scope.text>commodity.selling_rate, lowcolor: $scope.text<commodity.selling_rate, normalcolor: $scope.text==commodity.selling_rate}"

但这不起作用，如何在 Angular js 中做到这一点。有没有办法通过角度 $watch 来比较这个动态创造的价值。请任何人帮助我。

Answer 1

目前我不知道如何在括号表达式中存储或获取先前的值，但有一个解决方法：观察这些元素的模型变化。

您可以通过将objectEquality 设置为true 来查看您的商品列表commodityrate.Commodity，而不是在每个元素上添加$watch

scope.$watch('commodityrate.Commodity', function(newValue, oldValue) {
  //iterating newValue and compare it the corresponding element in oldValue.
},
true);

顺便说一句，您仍然需要将priceTrend 之类的新属性添加到Commodity 并使用它来定义您的ngClass。

由于在从后端获取新价格时，您总是需要检查每个商品的价格变化，因此启用 objectEquality 后观看 commodityrate.Commodity 不会导致性能下降。