ngClassOdd and ngClassEven Directives of AngularJS

Introduction

In my previous articles I told you about:

This article explains the ngClassOdd and ngClassEven directives of AngularJS.

AngularJS provide a feature by which you can apply CSS just like that of a Grid, in other words in Odd and Even order. In this article I will show you two directives that can be used together to show even and odd data in a different manner.

First I will show you the "ngClassOdd" directive.

Step 1

First of all you need to add an external Angular.js file to your application, "angular.min.js".

For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

</head>

Step 2

Now I will create a small CSS Class in the Head Section of my application.

<style>

.classOdd {

color: blue;

font-size:30px

}

</style>

You can see that I have created a small CSS class in which the color and font size are declared

Step 3

Now I will work on the View Model, in other words the design part of this application. Here I am creating a simple list of names by using ng-init and then display them using the ng-repeat. I have already explained ng-init and ng-repeat in the article: ng-init and ng-repeat Directive of AngularJS.

<body>

<div ng-init="cars=[{name:'Anu',car:'i20'},

{name:'Anubhav',car:'Verna'},

{name:'Mohit',car:'Audi A6'}]">

<ul>

<p ng-class-odd="'classOdd'">{{name.name}} likes {{name.car}}</p>

</li>

</ul>

</div>

</body>

Here I used a Div in which some values are initialized using the ng-init.

Then I used a List I created in which ng-repeat is used, ng-repeat helps us to show the data provided in ng-init, the name in "name in cars" is a variable that can be changed.

Then a <p> tag is used in which the ng-class-odd directive is used, in this directive a CSS class is provided that was created in the head section. Data will be shown using this <p> tag, for showing the Data binding is done in this format: {{variable name.initialized variable}}.

Now our application is ready for execution executed so let's see the output.

Output

ngClassOdd and ngClassEven

You can see that the odd text is in the Blue color and has a greater font size.

Now I will work on the "ngClassEven".

Step 1

I will create one more CSS class in the Style tag in the Head Section that will be used by ngClickEven. So, now the Script tag is modified to:

<style>

.classEven {

color: red;

font-size:40px

}

.classOdd {

color: blue;

font-size:30px

}

</style>

You can see that classEven is added in which a different font color and a different font sixe are declared, so now the Even Data should be seen in the color Red and in a bigger size than the odd data.

Step 2

Our ViewModel also must be modified, so now the ViewModel will look like this:

<body>

<div ng-init="cars=[{name:'Anu',car:'i20'},

{name:'Anubhav',car:'Verna'},

{name:'Mohit',car:'Audi A6'}]">

<ul>

<p ng-class-odd="'classOdd'" ng-class-even="'classEven'">{{name.name}} likes {{name.car}}</p>

</li>

</ul>

</div>

</body>

Here everything is the same except that in the <p> tag ng-class-even is used, in ng-class-even the new CSS class is called.

Now our application is ready to be executed.

Output

ngClassOdd and ngClassEven

The complete code of this application is as follows:

<style>

.classEven {

color: red;

font-size:40px

}

.classOdd {

color: blue;

font-size:30px

}

</style>

</head>

<body>

<div ng-init="cars=[{name:'Anu',car:'i20'},

{name:'Anubhav',car:'Verna'},

{name:'Mohit',car:'Audi A6'}]">

<ul>

<p ng-class-odd="'classOdd'" ng-class-even="'classEven'">{{name.name}} likes {{name.car}}</p>

</li>

</ul>

</div>

</body>

</html>