应用 ng-class 来评估 P 标签内的不同表达式
Apply ng-class to evaluate different expressions inside a P tag
我想应用 ng-class 来评估 < p > 标签内的负值
<p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{d.l4w_metric}}</p>
我有我的 CSS:
.positive{ color: green}
.negative{ color: red}
但我不知道如何让 angular 计算标签内的所有值,而不是像这样一个一个地计算值
ng-class = "{'positive':data.merchMetrics.LW_CHG_LY >=0,'negative':data.merchMetrics.LW_CHG_LY <0}"
因为我在这个标签中有五个表达式,所以我想有一些方法可以避免这种情况。
您可以简单地将逻辑转移到控制器
ng-class="evaluateClass(data.merchMetrics)"
控制器
$scope.evaluateClass = function(merchMetrics){
var returnClass = "";
//below for loop will iterate through each property of object
//and will decide the class need to apply
for (var key in merchMetrics) {
if (merchMetrics.hasOwnProperty(key)) {
//you could also add the logic here
//so that string will have positive & negative class once
if(merchMetrics[key] > 0)
returnClass = returnClass + "positive "
else
returnClass = returnClass + "negative "
}
}
//you could return your class from here
return returnClass;
};
我想应用 ng-class 来评估 < p > 标签内的负值
<p <strong>LW$:</strong> {{d.lw_metric}} <strong>LW:</strong> {{d.lw_metric_percentage}} <strong>L4W:</strong> {{d.l4w_metric}}</p>
我有我的 CSS:
.positive{ color: green}
.negative{ color: red}
但我不知道如何让 angular 计算标签内的所有值,而不是像这样一个一个地计算值
ng-class = "{'positive':data.merchMetrics.LW_CHG_LY >=0,'negative':data.merchMetrics.LW_CHG_LY <0}"
因为我在这个标签中有五个表达式,所以我想有一些方法可以避免这种情况。
您可以简单地将逻辑转移到控制器
ng-class="evaluateClass(data.merchMetrics)"
控制器
$scope.evaluateClass = function(merchMetrics){
var returnClass = "";
//below for loop will iterate through each property of object
//and will decide the class need to apply
for (var key in merchMetrics) {
if (merchMetrics.hasOwnProperty(key)) {
//you could also add the logic here
//so that string will have positive & negative class once
if(merchMetrics[key] > 0)
returnClass = returnClass + "positive "
else
returnClass = returnClass + "negative "
}
}
//you could return your class from here
return returnClass;
};