ng-class with function and Expression

angularjs ng-class
Vivek Panday picture Vivek Panday · May 29, 2015 · Viewed 19k times · Source

I need to add two classes by using ng-class ,one class I am getting by a function another I need to get by an expression - Below is code which I am using but getting some syntax error -

 <div class="field-icon" ng-class="getFieldClass(entry.entry_type_id) , 'used':  entry_map[entry.guid] > 0" ></div>

What would be correct syntax if it is possible to use function and expression together.

Answer

Pankaj Parkar picture Pankaj Parkar · May 29, 2015

You had wrong ng-class syntax, it should be in JSON format like ng-class="{'used': expression2 }", expression will return Boolean on basis of that class will get added or removed from the class attribute value.

As your getFieldClass method is returning class name then you could shift your both class logic in getFieldClass method

Markup

<div class="field-icon" 
ng-class="getFieldClass(entry)" ></div>

Code

$scope.getFieldClass = function(entry){
   //use entry.entry_type_id here to decide class which is first
   //'text-box-icon' class has been selected on some condition based on entry.entry_type_id
   return {"text-box-icon": true, 'used': $scope.entry_map[entry.guid] > 0};
}

Related questions

AngularJS ng-class if-else expression

With AngularJS I'm using ng-class the following way: <div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/> I'm wondering if I can use the if-else expression to do something similar to …

Read More
Adding multiple class using ng-class

Can we have multiple expression to add multiple ng-class ? for eg. <div ng-class="{class1: expressionData1, class2: expressionData2}"></div> If yes can anyone put up the example to do so. .

Read More
adding and removing classes in angularJs using ng-click

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is …

Read More