如果时间比当前时间大 2 小时，则 ng-show 按钮答案

【问题标题】：ng-show button if time is 2hrs greater than current time如果时间比当前时间大 2 小时，则 ng-show 按钮
【发布时间】：2016-11-06 22:58:26
【问题描述】：

我正在使用 angular.js 根据指定时间隐藏/显示按钮。如果指定时间小于当前时间-2hrs，我只想显示按钮。

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 是根据当前时间计算的，因此它会不断变化。当记录的时间大于加载时的最大日期时，该按钮不会出现，尽管随着时间的推移它最终会小于最大日期。我希望按钮在最终变少时出现，而无需刷新页面。

有什么想法吗？

谢谢

【问题讨论】：

首先，您不必同时从onclick 和ng-click 调用close 函数。请不要使用<b> 标记粗体！为此使用 CSS 更符合标准。
感谢您的反馈。请对我遇到的实际问题有任何想法？
愿意分享order.time 的样子吗？
我认为您的意思是“当前时间比用户登陆网站的时间多 2 小时”

标签： javascript angularjs

【解决方案1】：

现在没有什么可以让你的函数在时机成熟时重新评估。您需要以某种方式设置一个计时器，以便稍后更新可见性。 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)
          }
        })
      }
    }
  }
})

【讨论】：

我猜 const 是一个新的 ES 6 特性，因此不兼容所有浏览器？如果我错了，请纠正我。
是的，我已经习惯了 :) 切换回 es5 很难。 :)

【解决方案2】：

$interval 是一个非常简单（不一定是性能最高）的解决方案。

$scope.showButton = false;

$interval(function() {
   var time=new Date(time);
   var maxtime= new Date();
   maxtime.setHours(maxtime.getHours() - 2);
   $scope.showButton = time <= maxtime;
}, 1000;

<button ng-show="showButton"></button>

问题是，随着时间的推移，Angular 不会自动消化。它仅在事件发生时进行摘要，例如用户单击、http 请求结束等。间隔也会导致新的摘要周期开始。

【讨论】：

这不会无缘无故地像每秒一样运行摘要循环吗？对于每个按钮。
是的，它会的。简单对性能。在许多情况下，这就足够了。如果 OP 正在编写一个非常复杂的应用程序，那么他可能应该尝试更好的东西。

【解决方案3】：

使用与@Yury Tarabanko 的回答几乎相同的方法。但方式略有不同。

创建了一个计时器，当对象距当前时间超过两小时时将隐藏该对象。

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope, $timeout){
  
  $scope.order = {
    "time": "July 5, 2016 10:54:00",
    "shown": true
  }
  
  $scope.laterThanTwoHoursFrom = function(time) {
    var time = new Date(time);
    var maxtime= new Date();    
    maxtime.setHours(maxtime.getHours() - 2);
    
    if (time >= maxtime){
      $timeout(function(){
        return true
      }, time.getTime() - maxtime.getTime());
    }
    else {
      return true
    }
  };
  
  $scope.close = function(order) {
    order.shown = false;
  };
  
});

.close-btn {
  padding: 0px 3px; 
  height: 30px; 
  font-size: 9px;
  line-height: 25px;
 }

.order.closed {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="mainCtrl">
    
    <div class="order" 
      ng-class="{'closed' : !order.shown}" 
      ng-hide="laterThanTwoHoursFrom(order.time)">
      
        <p>Order information<p>
      
        <button class="close-btn" ng-click="close(order)">
          <strong>X</strong>
        </button>
    </div>
    
  </div>
</div>

【讨论】：