在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()]"