Introduction:
Here I will explain how to refresh div for every 1 second using AngularJS. 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.
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
|
|
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 Email
|
|||
6 comments :
nice one sir!
how to use it with database..
it shows updated data from table.
When i click on button twice or thrice, I think seconds are coming faster than normal .
Very good angular article, I think a lot of possibilities!!!
dranish2005@gmail.com
Note: Only a member of this blog may post a comment.