AngularJS: установка класса динамически на основе разницы во времени
Я сравниваю время и основываясь на этом, я устанавливаю имя класса 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;
}
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
Проверьте обновленную скрипку: https://jsfiddle.net/4jz8uh2y/3/
Проблема заключалась в том, что вам нужно сделать парсинг моментов в контроллере, а не в шаблоне. Так как вы используете простую версию моментальных моментов (не угловой момент), ваш контроллер ничего не знает о функциях моментальных моментов, поэтому не может правильно оценить сравнение по времени.