Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Angularjs $interval Example to Refresh Div for Every n Seconds

May 11, 2015
Introduction

Here I will explain how to refresh div for every 1 second using $interval in 
AngularJS with example. Generally in JavaScript we will use setInterval() function to run our code for every specific period of time same way in AngularJS we have $interval angular module to do same functionality like setInterval() function. To refresh div for every 1 second here I am going to use $interval angular module.

Description:
  
In previous articles I explained jQuery setInterval() function example, start and stop time in javascript using setInterval function, jQuery redirect to another page after 5 seconds, Javascript redirect to another page after 5 seconds and many articles relating to
jQuery, JavaScript and asp.net. Now I will explain how to refresh div for every 1 second using AngularJS.

To refresh div for every 1 second we need to write the code like as shown below


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Refresh Div for every 1 second using Angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function($scope, $interval) {
var i = 0;
var timer;
$scope.message = "DIV is refreshed at " + i + " seconds.";
$scope.starttimer = function() {
timer = $interval(function() {
$scope.message = "DIV is refreshed at " + i + " seconds.";
i++;
}, 1000)
}
$scope.stoptimer = function() {
if (angular.isDefined(timer)) {
$interval.cancel(timer);
timer = undefined;
$scope.message = "Timer is killed :-(";
}
}
})
</script>
</head>
<body>
<form id="form1">
<div data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<input type="button" id="btnStart" data-ng-click="starttimer()" value="Start" />
<input type="button" id="btnStop" data-ng-click="stoptimer()" value="Stop"/>
{{message}}
</div>
</form>
</body>
</html>
Live Demo

To check live demo try to click on below buttons to start and stop timer


{{message}}

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

0 comments :

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.