ngClass

by Rob Rothe

HTML

<div ng-app="app" ng-controller="Controller as ctrl">
  <ul>
    <li ng-repeat="p in ctrl.products" ng-class="ctrl.setClass(p)">{{p.name}}</li>
  </ul>
</div>

CSS

.css-class-yellow {
  color: yellow
}

.css-class-red {
  color: red
}

.css-class-green {
  color: green
}

JavaScript

angular
  .module('app', [])
  .controller('Controller', Controller);

function Controller() {
  var vm = this;

  vm.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,
  }];

  vm.setClass = setClass;

  function setClass(p) {
    if (p.price > 50) {
      return 'css-class-yellow';
    }

    if (p.price < 50) {
      return 'css-class-red';
    }

    if (p.price > (50 + (50 * 60 / 100))) {
      return 'css-class-green';
    }
  }
}