NG class demo

by tridip

HTML

<div ng-app="myApp">
  <ul ng-controller="MyController">
    <li ng-class="setColor(item.price)" ng-repeat="item in products">{{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) {

$scope.setColor = function(price) {

     alert(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,
  	}
	]
})