ng-repeat中的Angular js条件类答案

【问题标题】：Angular js conditional class in ng-repeatng-repeat中的Angular js条件类
【发布时间】：2016-03-24 21:25:53
【问题描述】：

我使用 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('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 否则意味着它应该是以前的颜色。但在我的代码中它不起作用请帮助任何人满足我的需求。

示例： div 的默认背景颜色：绿色当前显示率：2500 新率带有 2510 表示背景颜色绿色新速率像 2455 表示背景颜色红色

然后新的费率像 2458 意味着 bg 颜色为绿色如果新费率像 2458 一样，则表示应显示相同的先前颜色（在本例中为绿色）红色/绿色。

【问题讨论】：

你为什么不在你的 ng-class 条件中使用commodity？
无法理解您的回复
究竟是什么不工作？你有错误吗？它到底应该做什么，而它又做了什么？

标签： javascript css angularjs ionic-framework

【解决方案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
}

【讨论】：

【解决方案2】：

您曾经使用过 ng-if 吗？您可以制作 2 个 div，根据商品价格仅显示 2 个中的一个。

这里有一些信息：AngularJS Docs ng-if

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

【讨论】：