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

Question

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

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

<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中做到这一点。有什么办法可以通过 angular $watch 来比较这个动态创造的价值。请任何人帮助我。

Answer 1

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

无需在每个元素上添加 $watch，您可以通过将 objectEquality 设置为 true

查看您的商品列表 commodityrate.Commodity

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

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

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

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

How to get previous value and compare with new value before bind value in angularjs

angularjs

angularjs-directive

angularjs-scope