如果时间比当前时间长2小时,则显示ng-show按钮

Question

我正在使用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.我希望按钮在最终变得更少而不必刷新页面时出现.

有什么想法吗？

谢谢

Answer 1

现在没有什么能让你的功能在时机成熟时重新评估。您需要以某种方式设置一个计时器，以便稍后更新可见性。演示。

例如，您可以创建自定义指令。

<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)
          }
        })
      }
    }
  }
})