AngularJS ng-class with if-else expression | Learn AngularJS

If you're working with AngularJS, you'll likely come across the need to dynamically apply classes to elements based on certain conditions. That's where the ng-class directive comes in handy.

One way to use ng-class with an if-else expression is to pass an object to the directive. The keys of the object represent class names, and their values represent the conditions that determine whether the class should be applied.

For example, let's say you have a div element and you want to apply a class called "highlight" if a variable called "isHighlighted" is true, and a class called "normal" if it's false. Here's how you can use ng-class with an if-else expression to achieve this:

<div ng-class="{ 'highlight': isHighlighted, 'normal': !isHighlighted }">
  This div will have the "highlight" class if isHighlighted is true, and the "normal" class if it's false.
</div>

In this example, the object being passed to ng-class has two keys: "highlight" and "normal". The value of the "highlight" key is the boolean variable "isHighlighted", which will be true if the variable is true and false if it's not. The value of the "normal" key is the opposite of "isHighlighted" (using the ! operator), so it will be true if "isHighlighted" is false and false if it's true.

Using ng-class with an if-else expression like this can make your code much more dynamic and flexible, allowing you to apply classes based on a wide variety of conditions.