Angular js conditional class in ng-repeat

Question

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.

What exactly isn't working? Are you getting errors? What is it exactly supposed to do and what does it do instead? — André Kool
– André Kool, Commented Dec 18, 2015 at 9:16

DennisBeverloo · Accepted Answer · 2015-12-18 09:27:46Z

1

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
}

answered Dec 18, 2015 at 9:27

DennisBeverloo

916 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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...

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 18, 2015 at 8:25

Jelmer

1,0193 gold badges11 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular js conditional class in ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related