AngularJS：根据时差动态设置class

Question

我正在比较时间，并基于此设置 css class 名称，但我犯了一些错误，这就是代码无法正常工作的原因。请任何人看到我的代码并告诉我我在哪里犯了错误。

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

Answer 1

我建议将如此复杂的比较移回控制器：

//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;
}

然后你可以更容易地调试它。

UPD

检查更新后的 fiddle：https://jsfiddle.net/4jz8uh2y/3/

问题是您需要在控制器中而不是在模板中进行时刻解析。由于您使用普通版的 momentjs（不是 angular-moment），您的控制器对 momentjs 函数一无所知，因此无法正确评估时间比较。

AngularJS：根据时差动态设置class

AngularJS: setting class dynamically based on time difference

angularjs

momentjs

angular-moment