在 Angular js 中使用 ng-class 中的函数

Question

我正在使用ng-class 添加 CSS 类。即使有很多关于此的文章，我也无法使用ng-class 添加函数调用。

我有以下表达式。

ng-class="{'highlighter-row-Class' : (file.id == 1 && file.processed),
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed}"

现在，可以添加多个类。但是，我想在这里再添加一个条件，它将调用一个方法并返回一个类名：

$scope.getclass = function() {
  return 'someclass';
}

我尝试在最后一个条件之后在ng-class 中使用此方法，但它不起作用。那么，谁能告诉我如何正确使用ng-class？

---

另一个尝试（根据建议）：

ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed),
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed }, getClassForHrms(file)]"

功能：

$scope.getClassForHrms = function (file) {
    if (file.attributes.hrmsMandatoryFieldsMissing) {
        return "missingfieldspresent";
    } else if (file.attributes.isDocumentDuplicated) {
        return "documentduplicate";
    } else if (!file.attributes.isDocumentDuplicated) {
        return "documentuploadfailed";
    }
};

使用的 CSS：

.missingfieldspresent {
  color: red;
}
.documentduplicate {
  color: purple;
}
.documentuploadfailed {
  color: deeppink;
}

这是生成的 HTML 呈现的内容

<tr ng-repeat="file in processResumeFiles" ng-class="[{'highlighter-row-Class' : (file.id == 1 &amp;&amp; file.processed), 
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed }, getClassForHrms(file)]" 
    class="ng-scope [object Object] documentduplicate">

Answer 1

您需要一个类的数组，其中数组的一个元素可以是具有条件的类的对象，另一个是您的函数调用。一个简单的例子是：

ng-class="[{'some_class' : condition}, function_class()]"

这是一个演示：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.bb = function() {
    return "b";
  }
});

.a {
  color: #999999;
}

.b {
  background-color: #F1F1F1;
}

.c {
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  <br><input type="checkbox" ng-model="aa" /> A: color : #999999
  <br><input type="checkbox" ng-model="cc" /> C: font-size : 30px

  <div ng-class="[ bb(), {'a':aa, 'c':cc} ]">
    <p>Testing classes</p>
  </div>

</div>

---

对于你的例子，我认为你需要：

ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed) 
        ,'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
       'failed-doc': !file.processed}, getclass()]"