Ng css time by function
by tridip
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js"></script>
<div ng-app="myApp">
<ul ng-controller="MyController">
<li ng-class="setColor(item.businessTime,item.name)" ng-repeat="item in products">{{item.name}} — {{item.price}} — {{clsName}} — {{diff}}</li>
</ul>
</div>
CSS
@import "compass/css3";
div {
width: 300px;
}https://jsfiddle.net/tridip/ob8jh2o7/22/#
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!"
}
.clsRed {
font-weight: bold;
color: red;
}
.clsYello {
font-weight: bold;
color: yellow;
}
.clsGreen {
font-weight: bold;
color: green;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MyController', function MyController($scope) {
$scope.dbTime=moment('12:05:05','HH:mm:ss');
$scope.diff='';
$scope.clsName='';
$scope.setColor = function(businessTime,name) {
//alert('businessTime '+businessTime);
//alert('dbtime '+$scope.dbTime);
var diff =$scope.dbTime.diff(businessTime, 'minutes')
//alert(diff);
$scope.diff=diff;
if(diff < 60)
{
alert(name+' clsRed '+diff);
$scope.clsName="clsRed";
return "clsRed";
}
else if(diff > 60 )
{
alert(name+' clsYello '+diff);
$scope.clsName="clsYello";
return "clsYello";
}
else if(diff > 200)
{
alert(name+' clsGreen '+diff);
$scope.clsName="clsGreen";
return "clsGreen";
}
}
$scope.products = [
{
'name' : 'Xbox',
'clearance' : true,
'price' : 30.99,
'businessTime':moment('06:05:05','HH:mm:ss')
},
{
'name' : 'Xbox 360',
'clearance' : false,
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':moment('04:15:22','HH:mm:ss')
},
{
'name' : 'Xbox One',
'salesStatus' : 'new',
'price' : 50,
'businessTime':moment('12:10:22','HH:mm:ss')
},
{
'name' : 'PS2',
'clearance' : true,
'price' : 79.99,
'businessTime':moment('06:25:22','HH:mm:ss')
},
{
'name' : 'PS3',
'salesStatus' : 'old',
'price' : 99.99,
'businessTime':moment('08:11:22','HH:mm:ss')
},
{
'name' : 'PS4',
'salesStatus' : 'new',
'price' : 20.99,
'businessTime':moment('19:41:22','HH:mm:ss')
}
]
})