在函数派生表达式上使用带有if语句的ng-class而不是ng-model

Using ng-class with if statement on function derived expression instead of ng-model

本文关键字:ng-class 语句 ng-model if 表达式 派生 函数      更新时间:2023-09-26

我正在尝试使用ng-class应用条件css,但似乎它不适用于从函数派生的表达式,如

$scope.totalFeatureLength = function() {
  return $scope.items.reduce(function(current, item) { return current + item.Fiscal_Year_1; }, 0);
}; 
HTML

 <div class="progress">
  <div ng-class="{'progress-bar progress-bar-info': {{totalFeatureLength()number:2}}<10, 'progress-bar progress-bar-danger': {{totalFeatureLength()|number:2}}>=10}" role="progressbar" aria-valuenow="{{totalFeatureLength()| number:2}}%" aria-valuemin="0" aria-valuemax="100" style="width: {{totalFeatureLength()| number:2}}%;">
    {{totalFeatureLength()| number:2}}%
  </div>
</div>

当它直接用于ng-model项时工作良好,但它不能用于from functions的表达式。我需要创建一个指令,还是可以使用这个现有的方法?

ng-class已经接受了一个表达式,所以你不需要/想要双花括号,可以直接使用JS。

例如:

<div ng-class="{'progress-bar progress-bar-info': totalFeatureLength() < 10}">

这里有一个例子