AngularJS Quick Tip: ng-class
Last updated on Dec 4, 2014

The ng-class core directive makes dynamic css classes easy and straightforward. In conjunction with ng-repeat, we can create dynamic HTML templates by choosing the right css class based on model attributes.


The ng-class directive accepts a hash (javascript Object) where the keys are the names of the css classes that we want to append, and the values are booleans.

<div ng-repeat="item in items"
     ng-class ="{ active:, selected: item.selected }">

In the example above we are only including two classes, but the markup can get messy quickly (if not already).

Controller to the rescue

By definition, the angular controller should contain UI logic without coupling itself to the DOM. So it's best to implement a controller method that returns a hash based on our model:

class AppController {
    getStyle(item) {
        return {
            'active' :,
            'selected' : item.selected

Now, in the HTML we can replace our inline object with the function that we wrote above:

<div ng-repeat="item in items"
     ng-class ="getStyle(item)">

It's much easiear to maintain an object on the controller level than an inline object that we keep in our markup.

Back to all articles
We are leading front-end consultancy specializing in React, React Native, and Angular. We build web and mobile apps, train teams and consult on complex projects.

Tel AvivIsrael

New York CityUSA

© 500Tech. Building high-quality software since 2012.