javascript - ng-repeat 中的 Angular js 条件类

Question

我已经使用 ionic 框架开发了应用程序来为客户显示当前市场价格。我在使用 ng-repeat 循环的 angular js 条件类中遇到问题。当市场发生变化时，我需要显示高(绿色)和低(红色)颜色，如果没有变化，应该为 div 显示以前的颜色，我使用了下面的代码查看

<div class="cointable col">
                <div class="col coin-rate-table">
                    <div class="coin-rate-table-header">Gold Coins(&#8377;)</div>
                </div>
                <div class="row coin-rate-table coin-rate-body" ng-repeat="commodity in commodityrate.CoinGoldCommodity">
                    <div class="col liverate-commodity"><img class="bullet-image" src="img/rate-bullet.jpg" width="20" height="20" /><span class="live-coin-comm-name">{{commodity.name}}</span></div>
                    <div class="col" ng-class="{'rate-highcolor' : oldCoinGoldCommodity.CoinGoldCommodity[$index].selling_rate<commodity.selling_rate,'rate-lowcolor' : oldCoinGoldCommodity.CoinGoldCommodity[$index].selling_rate>commodity.selling_rate}"><span class="live-coincom-rate">{{commodity.selling_rate}}</span></div>

                </div>
            </div>

Controller :

.controller('CoinsCtrl', function($scope, $stateParams, $timeout, rateservice) {
       $scope.commodityrate = [];
       $scope.oldCoinGoldCommodity = [];
        (function tick() {
            rateservice.getRates().then(function(data){
                  $scope.oldCoinGoldCommodity.CoinGoldCommodity = $scope.commodityrate.CoinGoldCommodity;
$scope.commodityrate.CoinGoldCommodity = data.Commodities.CoinGoldCommodity;

           })['finally'](function(status) {
              $timeout(tick, 1000);
            });
          })();
})

CSS

.rate-highcolor {
    color:#FFFFFF;
    background-color: #00D600;
}

.rate-lowcolor {
    color:#FFFFFF;
    background-color: #FF0000;
}

每秒速率都会更新，因此如果速率变高，则应应用 css class .rate-highcolor 如果低意味着应用 css class .rate-highcolor 其他意味着它应该是以前的颜色。但在我的代码中它不起作用，请帮助任何人满足我的需求。

例子:div 的默认背景颜色:绿色当前显示率:2500新率自带2510表示底色绿色新的利率来了像 2455 意味着背景颜色红色

然后出现新的速率，例如 2458 表示背景颜色为绿色如果新利率出现，如 2458，则应显示相同的先前颜色(在本例中为绿色)红色/绿色。

Answer 1

就我个人而言，在 ng-class 中我会引用 $scope 函数，如下所示:

<div class="col" ng-class="{'rate-highcolor' : isHighRate($index),'rate-lowcolor' : isLowRate($index)}">
  <span class="live-coincom-rate">{{commodity.selling_rate}}</span>
</div>

然后在你的 Controller 中:

$scope.isHighRate = function(index) {
  return $scope.oldCoinGoldCommodity.CoinGoldCommodity[index].selling_rate < $scope.commodityrate.CoinGoldCommodity[index].selling_rate
}

$scope.isLowRate = function(index) {
  return $scope.oldCoinGoldCommodity.CoinGoldCommodity[index].selling_rate > $scope.commodityrate.CoinGoldCommodity[index].selling_rate
}