Question

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

这是我传递“移位”集合的控制器：

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>

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

1 个答案: