Question

我开发了使用离子框架的应用程序来显示客户的当前市场价格。我在角度js条件类中使用ng-repeat循环时遇到问题。市场变化时我需要显示高（绿色）和低（红色）颜色，如果没有变化，应该为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('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类.rate-highcolor如果低则表示应用css类.rate-highcolor else表示它应该是以前的颜色。但是在我的代码中它没有用，请帮助任何人来满足我的需求。

实施例： div的默认背景颜色：绿色当前显示率：2500 新的速率来自2510意味着背景颜色绿色新价格如2455表示背景颜色红色

然后新的价格就像2458意味着bg颜色绿色如果新的费率变为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>

然后在你的控制器中：

$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
}

Answer 2

您曾经使用过ng-if吗？你可以制作2个div，只显示2个中的一个，具体取决于comodityrate。

以下是一些信息：AngularJS Docs ng-if

我没有完全理解你的问题，但也许这会有所帮助......

ng-repeat中的Angular js条件类

2 个答案: