Search within TutorialsPark

AngularJS Classes and CSS styles - Odd Even Class


Learn how to use AngularJS Element Directives to Work with CSS class and assign Even and Odd Class.


AngularJS Element Directives : Working with Class and CSS styles

The AngularJS has a set of Directives which are used to assign CSS classes and individual CSS properties to properties to Elements

Table : AngularJS Element Directives Class and CSS Style Directives

Name Description Try It
ng-class To set the attribute class on an Element Try»
ng-style To Set multiple CSS properties Try»
ng-class-odd To set class attribute for elements at odd-numbered position, generated using directive ng-repeat Try»
ng-class-even To set class attribute for elements at even-numbered position, generated using directive ng-repeat Try»

AngularJS Element Directives : Assigning Classes and CSS Styles

AngularJS directives of ng-class is used to assign CSS classes to elements, while the directive ng-styleis used to assign multiple CSS style upon the Element.

In the Demo the Styling of the Rows is set using ng-class directive , while the styling of the columns is set using ng-style directive.

: AngularJS Element Directives Show and Hide Elements

Give it a TRY! » Note:Select the font-family for rows and columns using Checkbox for each.

AngularJS Element Directives : Styling Elements at Odd and Even Position

The AngularJS Directive of ng-class-odd and ng-class-even is used to style elements based on their position within the table, its works similar to built-in ng-repeat variables $even and $odd.

In the demo,the directive ng-class-odd sets CSS styles for elements at odd positions in the table, while the directive ng-class-even styles elements at even numbered position.

Example: Angular Element Directive Styling Elements at Odd and Even Position

Give it a TRY! » Note:The table created has striped pattern based on CSS classes.