NG class demo

HTML

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li ng-repeat="item in products" ng-class="setColor(item.price)" >{{item.name}} &mdash; {{item.price}}</li>
  </ul>
</div>

CSS

@import "compass/css3";

div {
  width: 300px;
}

li {
  margin-top: 10px;
}

.clearance {
  color: red;
  background: yellow;
  border-top: 2px solid orange;
}

.clearance:after {
  content: " on clearance!";
  font-weight: bold;
  font-style: italic;
}

.new {
  font-weight: bold;
  color: blue;
}

.new:after {
  content: " new!"
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyController', function MyController($scope) {

var colourMap = {
    "30.99": "speciality1Class",
    "99.99": "speciality2Class",
    "50": "speciality3Class",
    "79.99": "speciality4Class",
    "20.99": "speciality3Class"
};


$scope.setColor = function(price) {
		return colourMap[price];
}   
  
  $scope.products = [
    {
        'name' : 'Xbox',
        'clearance' : true,
        'price' : 30.99,
  	},
    {
        'name' : 'Xbox 360',
        'clearance' : false,
        'salesStatus' : 'old',
        'price' : 99.99,
  	},
    {
        'name' : 'Xbox One',
        'salesStatus' : 'new',
        'price' : 50,
  	},
    {
        'name' : 'PS2',
        'clearance' : true,
        'price' : 79.99,
  	},
    {
        'name' : 'PS3',
        'salesStatus' : 'old',
        'price' : 99.99,
  	},
    {
        'name' : 'PS4',
        'salesStatus' : 'new',
        'price' : 20.99,
  	}
	]
})