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

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

Answer 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请求结束等。间隔也会导致新的摘要周期开始。

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: