AngularJS: setting class dynamically based on time difference

Question

i am comparing time time and based on that i am setting css class name but i made some mistake and that is why code is not working. please anyone see my code and tell me where i made the mistake.

<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">

    <ul class="nav nav-pills" ng-init="catVal = 1">
       <li ng-repeat="item in products" ng-class="{'css-class-yellow' : moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 60,'css-class-red' : moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 200, 'css-class-green' : moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 300 }">
           <a href="">{{item.name}}</a>
        </li>

     </ul>        
</div>

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.dbTime='12:05:05';

  $scope.products = [{
    'name': 'Xbox',
    'clearance': true,
    'price': 30.99,
    'businessTime':'04:15:22'
  }, {
    'name': 'Xbox 360',
    'clearance': false,
    'salesStatus': 'old',
    'price': 99.99,
    'businessTime':'12:10:22'
  }, {
    'name': 'Xbox One',
    'salesStatus': 'new',
    'price': 50,
    'businessTime':'06:25:22'
  }, {
    'name': 'PS2',
    'clearance': true,
    'price': 79.99,
    'businessTime':'08:11:22'
  }, {
    'name': 'PS3',
    'salesStatus': 'old',
    'price': 99.99,
    'businessTime':'17:41:22'
  }, {
    'name': 'PS4',
    'salesStatus': 'new',
    'price': 20.99,
    'businessTime':'21:05:22'
  }];
  });

.css-class-yellow{
  background-color: yellow;
  }
.css-class-red{
  background-color: red;
  }
.css-class-green{
  background-color: green;
  }

can you explain where's the error ? "I made some mistake and that is why code is not working" - that's not enough — shershen, Apr 10 '16 at 09:31
i execute the code but no css is getting set....that is the problem. — Mou, Apr 10 '16 at 09:32
you should check each of the values you have " moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 60", "moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 200" - if any of those is true? — shershen, Apr 10 '16 at 09:36
see my js fiddle link and then give your suggestion to alter code. — Mou, Apr 10 '16 at 09:37
All your conditions are wrong, and equals to FALSE, that's why you have no classes shown - https://jsfiddle.net/4jz8uh2y/2/ — shershen, Apr 10 '16 at 09:38
why my all condition is getting false....i guess i am working with moment in right way. plzz give me your suggestion like where i made the mistake? — Mou, Apr 10 '16 at 09:40

shershen · Accepted Answer · 2016-04-10T09:59:42.510

2

I would propose to move such a complex comparison back to controller:

//template
<li ng-repeat="item in products" ng-class="{'css-class-yellow' : isYellowLess() }">

//controller
$scope.isYellowLess = function(){
  return moment($scope.dbTime, 'HH:mm:ss').diff(moment(item.businessTime, 'HH:mm:ss'), 'minutes') > 60;
}

Then you can debug it easier.

UPD

Check the updated fiddle: https://jsfiddle.net/4jz8uh2y/3/

The problem was that you need to do the moment parsing in the controller, not in the template. Since you use plain version of momentjs (not angular-moment), your controller knows nothing about the momentjs functions hence could not evaluate the time comparison properly.

edited Apr 10 '16 at 09:59

answered Apr 10 '16 at 09:31

shershen

9,875
11
39
60

see this my fiddle https://jsfiddle.net/tridip/czjo9f1m/ i change coding approach now declare function for date calculation like your first approach...but not working properly. can u tell me the reason? – Mou Apr 10 '16 at 10:14
this example (jsfiddle.net/tridip/czjo9f1m) works as for me - I see colored lines. – shershen Apr 10 '16 at 10:18
if see your code then notice moment not calculating time diff properly....do u know the reason? – Mou Apr 10 '16 at 11:41
I would assume that you should first check the momentjs documentation carefully. Looks like you're applying the diff function in a wrong way - and expecting something different from it. "moment not calculating time diff properly" - is not enough to understand your problem, I am sorry. – shershen Apr 10 '16 at 11:47
i post a topic for the same and describe what i am facing there http://stackoverflow.com/questions/36529577/issue-regarding-angular-js-and-setting-ng-class-dynamically – Mou Apr 10 '16 at 12:17

AngularJS: setting class dynamically based on time difference

1 Answers1