Question

我正在尝试使用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项目上使用时效果很好，但它不依赖于函数的表达式。我是否需要创建指令，或者可以使用此现有方法完成？

Answer 1

ng-class已经有了表达式，所以你不需要/想要双花括号，只能使用JS。

例如，你可以这样做：

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

这里是example fiddle

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

1 个答案: