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:
- a string of space-delimited class names
- an array of class names
- 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>
Above, we used ng-class expression type #3 – a map/object of class names to boolean values.
Q2 sounds like a good case for ng-style — the CSS styling is dynamic, so we can’t define a class for this.
ng-style accepts an “expression” that must evaluate to:
- an map/object of CSS style names to CSS values
For a contrived example, suppose the user can type in a color name into a texbox for the background color (a jQuery color picker would be much nicer):
<div class="main-body" ng-style="{color: myColor}">
...
<input type="text" ng-model="myColor" placeholder="enter a color name">
Fiddle for both of the above.
The fiddle also contains an example of ng-show and ng-hide. If a checkbox is checked, in addition to the background-color turning pink, some text is shown. If ‘red’ is entered in the textbox, a div becomes hidden.