ng-show button if time is 2hrs greater than current time (afficher le bouton si l'heure est supérieure de 2 heures à l'heure actuelle)

Question

J'utilise angular.js pour cacher/afficher un bouton en fonction d'une heure spécifiée. Je ne veux afficher le bouton que si l'heure spécifiée est inférieure à l'heure actuelle -2h.

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>

Lors du chargement de la page avec les données, tous les enregistrements dont l'heure est inférieure à la date maximale affichent le bouton.

La date maximale est calculée en fonction de l'heure actuelle et change donc constamment. Le bouton n'apparaît pas lorsque l'heure d'un enregistrement est supérieure à la date maximale au chargement, bien qu'au fur et à mesure que le temps passe, elle devienne inférieure à la date maximale. Je souhaite que le bouton apparaisse lorsque la durée devient inférieure à la date maximale sans avoir à actualiser la page.

Des idées, s'il vous plaît ?

Remerciements

Answer 1

Pour l'instant, rien ne vous permet de réévaluer votre fonction le moment venu. Vous devez, d'une manière ou d'une autre, mettre en place une minuterie qui mettra à jour la visibilité plus tard. Démonstration .

Par exemple, vous pouvez créer une directive personnalisée.

<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

Une solution très simple (mais pas nécessairement la plus performante) consiste à créer un fichier $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>

Le problème est qu'Angular ne digère pas automatiquement, lorsque le temps passe. Il ne digère que lorsqu'un événement se produit, comme un clic de l'utilisateur, une requête http qui se termine, etc. Un intervalle entraînera également le début d'un nouveau cycle de digestion.

Answer 3

J'utilise à peu près la même approche que la réponse de @Yury Tarabanko, mais d'une manière légèrement différente.

Création d'une minuterie qui masquera l'objet lorsqu'il aura dépassé de plus de deux heures l'heure actuelle.

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>