How to conditionally apply CSS classes using AngularJS ng-class

If you are displaying data from the database and you want to apply different CSS classes based on certain condition, you can using AngularJS built in directive ng-class


(function () {
   'use strict';

      .module('app', [])
      .controller('DemoController', DemoController);

      function DemoController (){
         var vm = this;
         vm.users = [ 
            {Id: 1, Name: "Joseph", Status: true}, 
            {Id: 2, Name: "Peter", Status: false}, 
            {Id: 3, Name: "Parker", Status: true}, 
            {Id: 4, Name: "Mark", Status: false}, 


<!DOCTYPE html>
<html lang="en-US">
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 400px;

        td {
            padding: 5px;

        .approved {
            background-color: #99ff99;

        .notApproved {
            background-color: #FF0000;
            color: #ffffff;
<body ng-app="app">

    <div ng-controller="DemoController as vm">
            <tr ng-repeat="user in vm.users" ng-class="{'approved': user.Status, 'notApproved': !user.Status}">

    <script src="angular.min.js"></script>
    <script src="app.js"></script>



1 Joseph true
2 Peter false
3 Parker true
4 Mark false



About author

User avatar

Waqas Anwar

Founder of, Senior Consultant, Microsoft .NET and Web Technologies