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

在角度js中使用ng-class中的函数

另一次尝试（建议之后）：

功能：

使用CSS：

1 个答案: