時間變化時更改元素的CSS屬性

這裏的控制器，我通過一個「班」集合：

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秒檢查一次並相應更新表格？這似乎不是對我來說正確的方式...

來源

2015-09-25 Eamorr

我會在控制器中做到這一點。添加一個新的$ scope函數getStyle（shift），它在控制器中執行檢查，並在html中將返回值設置爲td元素的style標記。 – STORM

不一定。

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>

來源

2015-09-25 21:27:09 corvid

時間變化時更改元素的CSS屬性

回答

相關問題