Question

<div ng-class:"{{myclass}}" role="progressbar" aria-valuenow="{{roundedtotalPerformanceCount}}" 
     aria-valuemin="0" aria-valuemax="100" ng-style="{'width' : ( totalPerformanceCount + '%' ) }">
     {{roundedtotalPerformanceCount}}&nbsp;%
</div>

我的控制器代码将是

if ($scope.roundedtotalPerformanceCount <= 20)
{
   $scope.myclass='progress-bar-below20';
}
else
{
   $scope.myclass = 'progress-bar';
}

Answer 1

以这种方式更改你的ng-class，你可以把表达式放在：

ng-class="{'progress-bar-below20': roundedtotalPerformanceCount <= 20, 'progress-bar': roundedtotalPerformanceCount > 20}"

你也有拼写错误。有:，应该是=

这是错误的：

<div ng-class:"{{myclass}}"

应该是：

<div ng-class="myclass"

我建议更好的可读性是将带有检查表达式的函数放在其中：

ng-class="{'progress-bar-below20': checkRoundedtotalPerformanceCount(), 'progress-bar': !checkRoundedtotalPerformanceCount()}"

或者，如果您喜欢使用三元运算符：

ng-class="checkRoundedtotalPerformanceCount() ? 'progress-bar-below20': 'progress-bar'"

Answer 2

您可以将ng-class修改为：

ng-class="roundedtotalPerformanceCount <= 20 ? 'progress-bar-below20' : 'progress-bar'"

如何修复classname而不是ng-class name

2 个答案: