CODEWITHSUNDEEP
javascriptcssangularjsionic-framework
Vinoth Kumar
Vinoth Kumar

Reputation: 499

Angular js conditional class in ng-repeat

I have developed app using ionic framework to display current market rates for customer.I'm having problem in angular js conditional class with ng-repeat loop. I need to show high(green) and low(red) color when the market get changes, if there is no changes previous color should be display for the div, I have used below code View 

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

For every second rate will get update, so if rate get high that previous rate should be apply css class .rate-highcolor if low means apply css class .rate-highcolor else means it should be in previous color. But in my code it's not working please help anyone to get my needs.

Example: Default background color for div : Green Current display rate : 2500 New rate comes with 2510 means background color Green New rate comes like 2455 means background color Red

Then new rates comes like 2458 means bg color Green IF new rates come like 2458 means same previous color(in this case Green) red / green should be display.

Upvotes: 1

Views: 578

Answers (2)

DennisBeverloo
DennisBeverloo

Reputation: 91

Personally, in ng-class I would refer to a $scope function, like this:

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

Then in your 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
}

Upvotes: 1

Jelmer
Jelmer

Reputation: 989

Have you ever worked with ng-if? You can make 2 divs and only show one of the 2 depending on what the comodityrate is.

Here is some information: AngularJS Docs ng-if

I didn't completely understand your problem but maybe this will help...

Upvotes: 0

Related Questions