i am new in angular. so i am tying to set class dynamically from my controller class. my program is working but right class is not getting attached. i am not being able to capture where is the problem in code. please see my code and js fiddle and tell me where is the problem for which right class is not getting attached with html element.
<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>
the problem list in setColor()
function
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')
}
]
})
js fiddle https://jsfiddle.net/tridip/czjo9f1m/1/
please help me to capture the problem. alert is showing setcolor function return right class name but different class is getting attached with html element.......why? thanks