Angularjs built in directives to apply css conditionally

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:

• ng-class - use when the set of CSS styles is static/known ahead of time
• ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.
• ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)
• ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)
• ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)
• ng-disabled and ng-readonly - use to restrict form element behavior
• ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations

The normal "Angular way" involves tying a model/scope property to a UI element that will accept user input/manipulation (i.e., use ng-model), and then associating that model property to one of the built-in directives mentioned above.

When the user changes the UI, Angular will automatically update the associated elements on the page.

---

Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class.

ng-class accepts an "expression" that must evaluate to one of the following:

1. a string of space-delimited class names
2. an array of class names
3. a map/object of class names to boolean values

Assuming your items are displayed using ng-repeat over some array model, and that when the checkbox for an item is checked you want to apply the pending-delete class:

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