angular ng-class if-else expression

Question

I'm using angularjs ng-class at the following way:

<div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/>

and I wondered if I can use the if-else expression, can I do something similar to this:

<div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', else:'classC'}[call.State]"/>

meaning whenever call.State different from first or second use classC and not specify each value.

thanks!

Answer 1

For angular ng-class if-else expression you can use nested inline if-then statements see the syntax below:-

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

A code example is as follows:-

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

</div>

Interested in getting into web development by learning Angular? Then check out the Angular Certification Training from Intellipaat, 24hrs online course with 48hrs for projects and exercises to gain proficiency in it.