Conditionally add a CSS class in AngularJS

In this post I am going to explain, how we can conditionally add a CSS class in AngularJS. This is my 11th blog in AngularJS series.

Let’s say we have to add a class to div tag or to all the divs that are generated while using ng-repeat but based on certain conditions. If those conditions are met, then only apply the class else don’t. May be you are trying to add a class based on role of the user logged. For this blog I would try to keep this simple for now. So, let’s say we have certain items and we are looping through each of them and display it using templates. Now each template also have a checkbox. In case the user check this checkbox, add a class to that respective div (just to visually notify the users that its selected), else don’t add any class or if it’s already being added then remove it.

We can achieve the above mentioned requirement using the ngClass directive. Here is the HTML markup for it:-

<div ng-controller="myController as ctrl" class="well">
    <div ng-repeat="item in ctrl.items" ng-class="{'selected-item': item.checked}">
        Book: {{item.name}}, {{item.title}}
        <input type="checkbox" ng-model="item.checked">
        <spen ng-show="item.checked">(selected)</span>
    </div>
</div>

And our JS code is:-

var app = angular.module('myApp', []);
app.controller('myController', function () {
    this.items = [{
        name: 'JK Rowling',
        title: 'Harry Potter and the Goblet of Fire'
    }, {
        name: 'Dan Brown',
        title: 'The Da Vinci Code'
    }, {
        name: 'Jane Austen',
        title: 'Pride and Prejudice'
    }];
});

In the JS code we have simply created a module & controller and inside the controller we have passed items object array with contains some demo book author name & title. If you are interested to know, how to create module & controller in more details then you can read my previous blog on it Creating a module in AngularJS and Creating a controller in AngularJS.

In the HTML markup, we are simply looping through those items using ng-repeat directive and displaying all the items inside the div along with the checkbox. Now if you check or uncheck the checkbox inside any div, you will see its background color will change since the CSS class is conditionally applied to it when checked and removed when unchecked. You can also see it in action in the demo below.

Demo:
Working Demo on Fiddle

That’s it! We have learned in this post how we can conditionally add a CSS class in simple manner. 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