ng-repeat中的Angular js条件类

Posted 2023-05-09

【中文标题】ng-repeat中的Angular js条件类

【英文标题】：Angular js conditional class in ng-repeat

【发布时间】：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"   /><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？

无法理解您的回复

究竟是什么不工作？你有错误吗？它到底应该做什么，而它又做了什么？

【参考方案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

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