How Can I Conditionally Apply and Remove CSS Styles in AngularJS?

Conditional CSS Style Application in AngularJS

Question: How can CSS styles be applied and removed conditionally in AngularJS?

Answer: AngularJS provides several directives for managing CSS styles dynamically:

• ng-class: Apply or remove CSS classes based on a condition.
• ng-style: Apply specific CSS styles, even if they cannot be captured in a class.
• ng-show and ng-hide: Toggle visibility of elements based on a condition.
• ng-if: Show or hide elements based on a single condition.
• ng-switch: Handle multiple exclusive visibility scenarios.
• ng-disabled and ng-readonly: Control form element behavior.
• ng-animate: Add animations and transitions to elements.

Q1: Conditional Styling for Item Deletion:

Use ng-class to toggle a pending-delete class when an item is marked for deletion.

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ...
   <input type="checkbox" ng-model="item.checked">
</div>

Q2: Customizable User Interface:

Use ng-style to dynamically apply CSS styles based on user input.

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">
</div>

The above is the detailed content of How Can I Conditionally Apply and Remove CSS Styles in AngularJS?. For more information, please follow other related articles on the PHP Chinese website!