javascript - 当时间改变时改变元素的 CSS 属性

Question

我正在使用 meteor 构建玩具作业调度系统。

这是我传递“shifts”集合的 Controller :

angular.module('eamorr').controller('EamorrCtrl', ['$scope', '$meteor', function ($scope, $meteor) {
    $scope.shifts = $meteor.collection(Shifts);
    ...
}]);

...到我的.ng.html:

<tr ng-repeat="shift in shifts">
   ...
   <td>{{shift.unixTime_start*1000 | date:'yyyy-MM-dd'}}</td> 
   ...
</tr>

现在，当 shift.unixTime_start 小于当前时间时，我希望整行都具有 background-color:orange 并且当 shift.unixTime_start 大于当前时间，我希望整行都有 background-color:green。

谁能告诉我如何巧妙、干净、简洁地完成此操作？

我一直在考虑执行大量 ng-if 语句等。我必须使用间隔吗？每 5 秒检查一次并相应地更新表格？这对我来说似乎不是正确的方法......

Answer 1

不一定。

Template.shifts.onCreated(function () {
  this.now = new ReactiveVar(moment());
  this.timerId = null;

  let oneSecond = moment().add(1, 'minute').startOf('minute');
  Meteor.setTimeout(() => {
    this.timerId = Meteor.setInterval(() => {
      this.now.set(moment());
    }, 5000)
  }, oneSecond.get('milliseconds'));
});

Template.shifts.helpers({
  timeColor: function (unix) {
    let time = moment(unix);
    if (moment.isBefore(time, this.now.get())) {
      return '#FF00FF';
    } else if (moment.isAfter(time, this.now.get())) {
      return '#FF0000';
    } else {
      return '#003366';
    }
  }
});

Template.shifts.onDestroyed(function () {
  Meteor.clearInterval(this.timerId);
})

然后在你的模板中

<tr style="background-color: {{ timeColor shift.unixTime_start }};">
  <td>{{ shift.unixTime_start }}</td>
</tr>