AngularJS: Klasse dynamisch basierend auf Zeitunterschied setzen

Question

Ich vergleiche die Zeit und auf der Grundlage, dass ich css Klassennamen, aber ich habe einen Fehler gemacht und deshalb Code funktioniert nicht. bitte, jeder sieht meinen Code und sagt mir, wo ich den Fehler gemacht habe.

<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

Ich würde vorschlagen, einen so komplexen Vergleich zurück zum Controller bewegen:

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

Dann debuggen Sie können es einfacher.

UPD

Überprüfen Sie die aktualisierte Geige: https://jsfiddle.net/4jz8uh2y/3/

Das Problem war, dass man in dem Moment Parsen in der Steuerung, in der Vorlage nicht tun müssen. Da Sie die einfache Version von momentjs (nicht angular-moment) verwenden, weiß Ihr Controller nichts über die momentanen Funktionen und konnte daher den Zeitvergleich nicht richtig auswerten.