javascript - How to hide a div after some time interval? - Stack Overflow

admin管理员组

文章数量:1022997

The code is

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

The idea is show this div when the report is sent, meaning reportSent is true. Now I would also like to hide this dive after 2 seconds lets say. How to I do that?

The code is

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

The idea is show this div when the report is sent, meaning reportSent is true. Now I would also like to hide this dive after 2 seconds lets say. How to I do that?

• javascript
• angularjs

Share Improve this question Follow edited May 7, 2015 at 1:47 Robin Carlo Catacutan 13.7k1212 gold badges5454 silver badges8686 bronze badges asked May 7, 2015 at 1:45 daydreamerdaydreamer 92.3k204204 gold badges473473 silver badges750750 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

$timeout can be used to hide the div after a 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./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>

You can use $timeout (a dependency you inject into your controller).

Example:

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

The code is

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

The idea is show this div when the report is sent, meaning reportSent is true. Now I would also like to hide this dive after 2 seconds lets say. How to I do that?

The code is

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

The idea is show this div when the report is sent, meaning reportSent is true. Now I would also like to hide this dive after 2 seconds lets say. How to I do that?

• javascript
• angularjs

Share Improve this question Follow edited May 7, 2015 at 1:47 Robin Carlo Catacutan 13.7k1212 gold badges5454 silver badges8686 bronze badges asked May 7, 2015 at 1:45 daydreamerdaydreamer 92.3k204204 gold badges473473 silver badges750750 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

$timeout can be used to hide the div after a 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./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>

You can use $timeout (a dependency you inject into your controller).

Example:

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

本文标签： javascriptHow to hide a div after some time intervalStack Overflow