-1

私は時間を比較しており、それに基づいてcssクラス名を設定していますが、間違いを犯したため、コードが機能していません。誰か私のコードを見て、どこで間違いを犯したか教えてください。

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

1 に答える 1

2

このような複雑な比較をコントローラーに戻すことを提案します。

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

更新されたフィドルを確認してください: https://jsfiddle.net/4jz8uh2y/3/

問題は、テンプレートではなく、コントローラーで瞬間的な解析を行う必要があることでした。単純なバージョンの momentjs ( angular-momentではない) を使用しているため、コントローラーは momentjs 関数について何も知らないため、時間比較を適切に評価できませんでした。

于 2016-04-10T09:31:00.517 に答える