我正在使用angular.js来隐藏/显示基于指定时间的按钮.如果指定的时间小于当前时间-2小时,我只想显示按钮.
Controller.js：
$scope.showclose = function (time) {
var time=new Date(time);
var maxtime= new Date();
maxtime.setHours(maxtime.getHours() - 2);
return (time <= maxtime)
};
index.html的：
<button ng-show="showclose(order.time)" style="padding:3px; height: 15px; font-size:9px;" onclick="close()" class="btn btn-primary closebutton" ng-click="close(order)" ><b>X</b></button>
在使用数据加载页面时,任何时间小于maxdate的记录都会显示该按钮.
maxdate是根据当前时间计算的,因此它会不断变化.
当记录的时间大于加载时的最大值时,按钮不会出现,尽管随着时间的推移,它最终会小于maxdate.我希望按钮在最终变得更少而不必刷新页面时出现.
有什么想法吗？
谢谢
解决方法
现在没有什么能让你的功能在时机成熟时重新评估.您需要以某种方式设置一个计时器,以便稍后更新可见性.
Demo.
例如,您可以创建自定义指令.
<button show-in="{{2*60*60*1000}}" class="btn btn-primary">In 2 hours</button>
app.directive('showIn',function($timeout) {
return {
restrict: 'A',scope: {
showIn: '@'
},link: function(scope,el) {
var delay = parseInt(scope.showIn) // milliseconds
if(delay > 0) {
el.addClass('hidden'); // assuming you have bootstrap
var pending = $timeout(function() { // set timer
el.removeClass('hidden')
pending = null
},delay)
scope.$on('$destroy',function() { // clear timer when element destroyed
if(pending) {
$timeout.cancel(pending)
}
})
}
}
}
})
