{{progre...">

How can I hide a div after a certain amount of time?

Code

    <div class="sendStatus" ng-if="reportSent">
      <span data-icon="ok"></span> 
      {{progressStatus}}
    </div>

      

The idea is to show this div when submitting the report, which means reportSent

. Now I would also like to hide this dive after 2 seconds

. How to do it?

+3


source to share


2 answers


$timeout

can be used to hide div after delay



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

app.controller('myController', function($scope, $timeout) {
  $scope.sendReport = function() {
    $scope.reportSent = true;
    $timeout(function() {
      $scope.reportSent = false;
    }, 2000);
  };
});
      

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
  <button ng-click="sendReport()">send report</button>
  <div class="sendStatus" ng-if="reportSent">Report Sent</div>
</div>
      

Run code


+4


source


You can use $timeout

(dependency you inject into controller).

Example:



$scope.reportSent = true;
$timeout(function() {
    $scope.reportSent = false;
}, 2000);

      

0


source







All Articles