Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-class with function and Expression

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.

like image 882
Vivek Panday Avatar asked May 29 '15 13:05

Vivek Panday


People also ask

Can we use NgClass and class together?

yes , you can do it. Did you try it? What happened? You can use both class and ngClass as the first one gives you the opportunity to apply a class that you want to implement in all cases under any circumstances and the later to apply classes conditionally.

How is NgClass used?

Definition and Usage. The ng-class directive dynamically binds one or more CSS classes to an HTML element. The value of the ng-class directive can be a string, an object, or an array. If it is a string, it should contain one or more, space-separated class names.

What is difference between NgClass and NgStyle?

ng-style is used to interpolate javascript object into style attribute, not css class. And ng-class directive translates your object into class attribute.

How do you give or NgClass a condition?

To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below. And in the above code, class name will be added only when the condition is true.

What is the use of Ng class in angular?

Definition of AngularJS ng-class AngularJS ng-class is an In-Built AngularJS directive that is used in the HTML view for designing a web page and using CSS styles which can be handled conditionally and dynamically based on evaluation of an expression.

How Ng-class directive works in AngularJS?

AngularJS ng-class | How ng-class Directive works in AngularJS? AngularJS ng-class is an In-Built AngularJS directive that is used in the HTML view for designing a web page and using CSS styles which can be handled conditionally and dynamically based on evaluation of an expression.

Why can't we use ternary operator in ngclass?

We can't write an if statement in ngClass, due to the fact that it is a statement. But we can't use a ternary operator since this is an expression. For example, if we want the text in a table cell to have a class of red when its value is larger than 10, and if not it should have a class of green, here is the code:

What are the return types of ngclass?

The Basics When it comes to ngClass, it supports three types of expression "return values": String, Array, and Object. Here is an example from the official documentation: <div [ngClass]="'first second'"> <div [ngClass]=" ['first', 'second']"> <div [ngClass]=" {first: true, second: true, third: true}"> <div [ngClass]=" {'first second': true}">


2 Answers

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};
}
like image 66
Pankaj Parkar Avatar answered Oct 10 '22 00:10

Pankaj Parkar


You can write both function and expression in array.

Example:

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

Live Example here: https://plnkr.co/edit/OWfkAwJiombrehiS7p9o?p=preview

like image 29
rajagopalx Avatar answered Oct 10 '22 00:10

rajagopalx