auto refresh div in angularjs

Auto Refresh div using $interval() in AngularJs

Hello Everyone, I am going to share the how to auto refresh a particular area using angularjs. 

In AngularJs, we are using $interval() function for auto refresh a div without reloading your page each and every 5 seconds. 

Click for Live demo

The HTML code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
//HTML code sample
<div ng-app="autoRefreshApp">
  <div ng-controller="autoRefreshController">
    <div>
      <input type="button" ng-click="stopTimer()" value="Stop Count">
    </div>
    <div style="color:green;">
      {{displayMsg}}
    </div>
  </div>
</div>
//HTML code sample

<div ng-app="autoRefreshApp">
  <div ng-controller="autoRefreshController">
    <div>
      <input type="button" ng-click="stopTimer()" value="Stop Count">
    </div>
    <div style="color:green;">
      {{displayMsg}}
    </div>
  </div>
</div>
The AngularJs code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//AngularJs code sample
   var app = angular.module('autoRefreshApp', []);
    app.controller('autoRefreshController', function($scope, $interval) {
      var count = 0;// this is default cont value.
       
      $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";
      // The  $interval function is used to auto refresh the count div.
      var auto = $interval(function() {
        $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";
        count++;
      }, 100);
      //This is use the custon method are used to stopTimer the timer when click on stop button.
      $scope.stopTimer = function() {
        if (angular.isDefined(auto)) {
          $interval.cancel(auto);
          auto = 0;
        }
      };
    });
//AngularJs code sample

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

    app.controller('autoRefreshController', function($scope, $interval) {

      var count = 0;// this is default cont value.
      
      $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";

      // The  $interval function is used to auto refresh the count div.
      var auto = $interval(function() {
        $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";
        count++;
      }, 100);

      //This is use the custon method are used to stopTimer the timer when click on stop button.
      $scope.stopTimer = function() {
        if (angular.isDefined(auto)) {
          $interval.cancel(auto);
          auto = 0;
        }
      };
    });
The Live code sample as given below.
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//Live code sample
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>auto refresh div in angularjs</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="//code.angularjs.org/1.2.20/angular.js"></script>
  <script>
    var app = angular.module('autoRefreshApp', []);
    app.controller('autoRefreshController', function($scope, $interval) {
      var count = 0;// this is default cont value.
       
      $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";
      // The  $interval function is used to auto refresh the count div.
      var auto = $interval(function() {
        $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";
        count++;
      }, 100);
      //This is use the custon method are used to stopTimer the timer when click on stop button.
      $scope.stopTimer = function() {
        if (angular.isDefined(auto)) {
          $interval.cancel(auto);
          auto = 0;
        }
      };
    });
  </script>
</head>
<body ng-app="autoRefreshApp">
  <div ng-controller="autoRefreshController">
    <div>
      <input type="button" ng-click="stopTimer()" value="Stop Count">
    </div>
    <div style="color:green;">
      {{displayMsg}}
    </div>
  </div>
</body>
</html>
//Live code sample

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>auto refresh div in angularjs</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="//code.angularjs.org/1.2.20/angular.js"></script>
  <script>
    var app = angular.module('autoRefreshApp', []);

    app.controller('autoRefreshController', function($scope, $interval) {

      var count = 0;// this is default cont value.
      
      $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";

      // The  $interval function is used to auto refresh the count div.
      var auto = $interval(function() {
        $scope.displayMsg = "This is auto Refreshed " + count + " counter time.";
        count++;
      }, 100);

      //This is use the custon method are used to stopTimer the timer when click on stop button.
      $scope.stopTimer = function() {
        if (angular.isDefined(auto)) {
          $interval.cancel(auto);
          auto = 0;
        }
      };
    });
  </script>
</head>

<body ng-app="autoRefreshApp">
  <div ng-controller="autoRefreshController">
    <div>
      <input type="button" ng-click="stopTimer()" value="Stop Count">
    </div>
    <div style="color:green;">
      {{displayMsg}}
    </div>
  </div>
</body>

</html>
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.