NG Directive for Class

by Rob Rothe

HTML

<div ng-app="app" ng-controller="Controller as ctrl">
  <ul>
    <li ng-repeat="p in ctrl.products">
      <price-class product="p"></price-class>
    </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)
  .directive('priceClass', priceClass);

function priceClass() {
  var directive = {
    restrict: 'E',
    template: '<span class="{{price_class}}">{{product.name}}</span>',
    scope: {
      product: '='
    },
    link: link
  }

  return directive;

  function link(scope, element) {
    var price = scope.product.price;

    if (price > 50) {
      scope.price_class = 'css-class-yellow';
    }

    if (price < 50) {
      scope.price_class = 'css-class-red';
    }

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

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