[英]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. 我已经开发了使用ionic框架为客户显示当前市场价格的应用程序。我在ng-repeat循环的角度js条件类中遇到问题。 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显示以前的颜色,我在下面的代码中使用了View
<div class="cointable col">
<div class="col coin-rate-table">
<div class="coin-rate-table-header">Gold Coins(₹)</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 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. 对于第二个速率,将进行更新,因此,如果速率变高,则应将先前的速率应用css类.rate-highcolor;如果为低,则应应用css类.rate-highcolor,否则应使用先前的颜色。 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 示例:div的默认背景色:绿色当前显示速率:2500新速率附带2510表示背景颜色绿色新速率附带2455表示背景颜色红色
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. 然后,新速率如2458表示背景色为绿色如果新速率如2458则应显示相同的先前颜色(在这种情况下为绿色)红色/绿色。
Personally, in ng-class I would refer to a $scope function, like this: 就个人而言,在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>
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
}
Have you ever worked with ng-if? 您曾经与ng-if合作吗? You can make 2 divs and only show one of the 2 depending on what the comodityrate is.
您可以设置2个div,仅显示2个div之一,具体取决于商品价格。
Here is some information: AngularJS Docs ng-if 以下是一些信息: AngularJS文档ng-if
I didn't completely understand your problem but maybe this will help... 我不完全了解您的问题,但这也许会有所帮助...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.