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