Use a function in ng-class in angular js

Question

I am using ng-class for adding the CSS classes. Even though there are lots articles on this, I am not able to add a function call with ng-class.

I have a following expression.

ng-class="{'highlighter-row-Class' : (file.id == 1 && file.processed),
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed}"

Now, multiple classes can get added. However, I want to add one more condition here, which will call a method and return a class name:

$scope.getclass = function() {
  return 'someclass';
}

My attempt used this method in ng-class after the last condition, but it wasn't working. So, can anyone please tell me how I can do it correctly with ng-class?

Another attempt (after suggestions):

ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed),
    'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
    'failed-doc': !file.processed }, getClassForHrms(file)]"

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";
    }
};

Used CSS:

.missingfieldspresent {
  color: red;
}
.documentduplicate {
  color: purple;
}
.documentuploadfailed {
  color: deeppink;
}

This is what the resulted HTML renders

<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">

Possible duplicate of Passing function with parameters in ng-class to get the class — zabusa
– zabusa, Commented May 17, 2018 at 11:01
Yes I know this, I tried this as well, But Please look at my question I am saying how to use that in my ng-class — ganesh kaspate
– ganesh kaspate, Commented May 17, 2018 at 11:03
Have you tried interpolation i.e. class="{{ getclass() }}"? — Satpal
– Satpal, Commented May 17, 2018 at 11:04

Aleksey Solovey · Accepted Answer · 2018-05-17 11:19:24Z

1

You need an array of classes, where one element of an array can be an object of classes with conditions and the other is your function call. A simple example would be:

ng-class="[{'some_class' : condition}, function_class()]"

Here is a demo:

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>

For your example I think you need:

ng-class="[{'highlighter-row-Class' : (file.id == 1 && file.processed) 
        ,'bold-row-Class' : lastSelectedResumeId == file.attributes.name, 
       'failed-doc': !file.processed}, getclass()]"

edited May 17, 2018 at 11:19

answered May 17, 2018 at 11:07

Aleksey Solovey

4,1663 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

ganesh kaspate Over a year ago

Classes are not getting applied now, and even the method is not getting called.

ganesh kaspate Over a year ago

Actually I tried console log now method is getting called but its not applying the classes .

georgeawg Over a year ago

Beware classes in CSS are case insensitive and classes in HTML are case sensitive. This can cause mismatches.

ganesh kaspate Over a year ago

Hey it is adding classes but only addinng those which are from the method. and one class is getting added which is like [object object]

Aleksey Solovey Over a year ago

@ganeshkaspate a hack would be to check for your conditions within a controller and append then into one big string that you can insert into ng-class

|

Collectives™ on Stack Overflow

Use a function in ng-class in angular js

Another attempt (after suggestions):

Function:

Used CSS:

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Another attempt (after suggestions):

Function:

Used CSS:

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related