ng-class : Assign a single class to multiple expression

Question

Can we have one class being assigned to multiple expressions (basically boolean values) ?

Like for example I have class 'wrong-date-entered' and multiple expression that can be assigned to it such as $scope.futureDateEntered , $scope.pastDateEntered and $scope.invalidDateEntered.

I know one way to do it as

 <div ng-class="{class1: expressionData1, class1: expressionData2}"> </div>

But, I would be using this way too frequently and would want a shorter way out, maybe something like this:-

 <div ng-class="{class1: expressionData1, expressionData2}"></div>

Is it possible ?

Satpal · Accepted Answer · 2017-11-24 11:43:54Z

2

You can use || operator

 <div ng-class="{class1: expressionData1 || expressionData2}"></div>

answered Nov 24, 2017 at 11:43

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

TeJas Over a year ago

Working perfectly fine. Thanks!

Rakesh Chand · Accepted Answer · 2017-11-24 11:48:29Z

Combine both conditions in one like (expressionData1) || (expressionData2)

<div ng-class="{ class1: expressionData1 || expressionData2 }"></div>

You can use any number of conditions combined properly if you have to use one class for them, no need to write separatly.

Collectives™ on Stack Overflow

ng-class : Assign a single class to multiple expression

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related