Conditionally add CSS class based on ngRepeat properties in AngularJS

In this post I am going to explain, how we can conditionally add CSS class based on ngRepeat properties in AngularJS. This is my 12th blog in AngularJS series.

So first let’s see what are the special properties of ngRepeat directive that are exposed on the local scope of each template instance. As per the AngularJS docs, we have the below mentioned properties like:

ngRepeat

ngRepeat

Ok, so lets start the demo. Firstly our HTML markup is quite simple for this demo like:

<div ng-controller="myController as ctrl" class="well">
    <div ng-repeat="friend in ctrl.friends" ng-class="{'selected-item': false}">
        {{$index + 1}}. {{friend.name}} who is {{friend.age}} years old.
    </div>
</div>

You will notice in the highlighted line above that we have set the ng-class selected-item class to false right now as we don’t want to apply the class as of now. We will do that very soon based on the ngRepeat properties. Also our js code looks like:

var app = angular.module('myApp', []);
app.controller('myController', function () {
    this.friends = [
      {name:'John', age:25, gender:'boy'},
      {name:'Jessie', age:30, gender:'girl'},
      {name:'Johanna', age:28, gender:'girl'},
      {name:'Joy', age:15, gender:'girl'},
      {name:'Mary', age:28, gender:'girl'},
      {name:'Peter', age:95, gender:'boy'},
      {name:'Sebastian', age:50, gender:'boy'},
      {name:'Erika', age:27, gender:'girl'},
      {name:'Patrick', age:40, gender:'boy'},
      {name:'Samantha', age:60, gender:'girl'}
    ];
});

And in the UI it looks like:

ngRepeat UI

Now let’s start with $index first and see how we can utilize it to meet our requirements

$index

As you have already read in docs, $index is mainly iterator offset of the repeated element which starts from 0 and ends in length-1. Now let’s say you want to set a class to 2nd and 5th friend list only in the above list of friends. So, we can use $index here to achieve that by using the below expression.

<div ng-controller="myController as ctrl" class="well">
    <div ng-repeat="friend in ctrl.friends" ng-class="{'selected-item': ($index === 1 || $index === 4)}">
    ...

Since the $index is zero based we have used $index 1 and 4 to achieve the desired result. You can also see it in the demo below.

Demo:
Working Demo on Fiddle

UI Result:

ngRepeat3

$first

As you have already read in docs, $first is mainly a boolean value which returns true if the repeated element is first in the iterator. Now let’s say you want to set a class to 1st friend list only in the above list of friends. So, we can use $first here to achieve that by using the below expression.

<div ng-controller="myController as ctrl" class="well">
    <div ng-repeat="friend in ctrl.friends" ng-class="{'selected-item': $first}">
    ...

Demo:
Working Demo on Fiddle

UI Result:

ngRepeat4

$even

Now $even is mainly a boolean value which returns true if the iterator position $index is even (otherwise false). Now let’s say you want to set a class to all the alternate friend in the above list of friends starting from 1st position. So, we can use $even here to achieve that by using the below expression. (If you want to start from 2nd position the you can use $odd instead)

Demo:
Working Demo on Fiddle

UI Result:

ngRepeat5

In the similar way you can use the other variables $middle, $last and $odd based on your requirement. Incase you face any issue while using them just let me know.

That’s it! We have learned in this post how we can conditionally add a CSS class in simple manner based on ngRepeat properties. If you have any comments or suggestion about this post, I would really appreciate it.
Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s