Angularjs Ngclass Conditional

AngularJS ngClass conditional

Your first attempt was almost right, It should work without the quotes.

{test: obj.value1 == 'someothervalue'}

Here is a plnkr.

The ngClass directive will work with any expression that evaluates truthy or falsey, a bit similar to Javascript expressions but with some differences, you can read about here.
If your conditional is too complex, then you can use a function that returns truthy or falsey, as you did in your third attempt.

Just to complement: You can also use logical operators to form logical expressions like

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Conditional ng-class

You can use ternary operator inside simple interpolation tags:

ng-class="{{ time.write_off ? time.write_off_class : time.narrativeState }}"

Angular: conditional class with *ngClass

Angular version 2+ provides several ways to add classes conditionally:

type one

    [class.my_class] = "step === 'step1'"

type two

    [ngClass]="{'my_class': step === 'step1'}"

and multiple option:

    [ngClass]="{'my_class': step === 'step1', 'my_class2' : step === 'step2' }"

type three

    [ngClass]="{1 : 'my_class1', 2 : 'my_class2', 3 : 'my_class4'}[step]"

type four

    [ngClass]="step == 'step1' ? 'my_class1' : 'my_class2'"

You can find these examples on the documentation page

Using conditional operator with ng-class - AngularJS

You could minimize it to single expression inside ng-class condition, by adding tab-pane as default class and add active class conditionally when tab is active.

 class="tab-pane" ng-class="{'active': activeTab === 1}

convert this multiple condition into ng-class conditional

You don't need ng-class for that, you just need to put the logic inside a method in your $scope, like below

$scope.getClass = function(work, toWork, overall){
    if (work == toWork || overall == "-"){
      return "black";
    }else if (work < toWork) {
      return "red";
    }else if(work > toWork)  {
      return "green";
    }
}

and in your view, call it like this

<span class="{{getClass(work, toWork, overall)}}"></span>

Multiple condition on ng-class in angularjs

I guess that you want complete class to be added with this condition: item.Id != 0. The correct syntax for this is the below:

<div ng-class="{ 'complete': item.Id != 0 }"></div>

You can add as many classes you want using a comma:

<div ng-class="{ 'complete': item.Id != 0, 'abc': item.name == 'FName' }"></div>

AngularJS | Conditional Class using ng-class

You could just do it in many ways, one simple way would be to use an object with bracket notation.

Example:-

ng-class="{ true: 'vfnz-form--error', false : 'vfnz-form--good'  }[loginForm.username.$invalid]"

Or (since it cannot be both invalid and valid):-

ng-class="{'vfnz-form--error' : loginForm.username.$invalid, 'vfnz-form--good' : loginForm.username.$valid}"

And if you want to do it only if form is dirty you could yes add condition to check for $pristine/$dirty but you could also make use of the class angular adds on the inputs (and on the form as well) i.e ng-pristine/ng-dirty so you could define the rule with these class names to make it more specific.

ex:-

.vfnz-form--error .ng-dirty.something{/*apply bad rules*/} 

AngularJS ng-class if-else expression

Use nested inline if-then statements (Ternary Operators)

<div ng-class=" ... ? 'class-1' : ( ... ? 'class-2' : 'class-3')">

for example :

<div ng-class="apt.name.length >= 15 ? 'col-md-12' : (apt.name.length >= 10 ? 'col-md-6' : 'col-md-4')">
    ...
</div>

And make sure it's readable by your colleagues :)

how to write conditional statements in ng-class?

You can simply use a ternary condition in your case

<div ng-class="favOffers[offer.id] ? 'ion-ios-heart': 'ion-ios-heart-outline'"></div>

AngularJS ngClass conditional for multiple variable in sorting

An array is not equal to another array in JavaScript, even if both contain the same strings:

console.log(['a'] === ['a']); // prints false

So you need another way to know if the sort type is ['rollno','marks'] or ['marks','rollno'].

You could simply use

ng-class="{ active: sortType[0] === 'rollno' }"

Or you could add a function to your controller like

$scope.isSortTypeEqualTo = function(sortType) {
    return angular.equals($scope.sortType, sortType);
};

and use

ng-class="{ active: isSortTypeEqualTo(['rollno','marks']) }"

---

Related Topics