Utilizing the ng-class feature to include CSS classes has been a bit challenging for me. Despite reading numerous articles on the topic, I am still struggling with implementing a function call within ng-class.
Below is the expression I am working with:
ng-class="{'highlighter-row-Class' : (file.id == 1 && file.processed),
'bold-row-Class' : lastSelectedResumeId == file.attributes.name,
'failed-doc': !file.processed}"
While multiple classes can be added using this method, I aim to include an additional condition that triggers a method and returns a specific class name:
$scope.getclass = function() {
return 'someclass';
}
I attempted to use this method within ng-class after the last condition, but it did not work as expected. Can someone guide me on the correct way to achieve this using ng-class?
Revised approach based on feedback:
ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed),
'bold-row-Class' : lastSelectedResumeId == file.attributes.name,
'failed-doc': !file.processed }, getClassForHrms(file)]"
Function Definition:
$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 Used:
.missingfieldspresent {
color: red;
}
.documentduplicate {
color: purple;
}
.documentuploadfailed {
color: deeppink;
}
Here's how the final HTML output appears:
<tr ng-repeat="file in processResumeFiles" ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed),
'bold-row-Class' : lastSelectedResumeId == file.attributes.name,
'failed-doc': !file.processed }, getClassForHrms(file)]"
class="ng-scope [object Object] documentduplicate">