I am just starting to learn angular js and I recently came across the ng-class directive. Below is an example of how I have used it:
ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed),
'bold-row-Class' : lastSelectedResumeId == file.attributes.name,
'failed-doc': !file.processed }, getClassForHrms(file)]"
CSS Styles
.missingfieldspresent {
color: red;
}
.documentduplicate {
color: purple;
}
.documentuploadfailed {
color: deeppink;
}
JavaScript Function
$scope.getClassForHrms = function (file) {
if (file.attributes.hrmsMandatoryFieldsMissing) {
return "missingfieldspresent";
} else if (file.attributes.isDocumentDuplicated) {
return "documentduplicate";
} else if (!file.attributes.isDocumentDuplicated) {
return "documentuploadfailed";
}
};
Rendered HTML Output
<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">
Currently, when rendering the HTML, it seems like the class is not being added as expected due to an object being returned. Can anyone suggest a solution for this issue?
Any help or suggestions on how to resolve this would be greatly appreciated.