Displaying Data after Time Interval in AngularJS

Question

Here is the Link for the jsFiddle : AngularJS : Display Data

I have HTML File is like following:

<div ng-controller="myCtrl">         
    <div ng-repeat="test in tests">
           <p>{{test.testName}}</p>
    </div>
</div>

Controller under .js file is like following:

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

function myCtrl($scope) {
    $scope.tests = [{
        "testName" : "Test-1 : Windows Test"
        }, 
        {
        "testName" : "Test-2 : Linux Test"
        },          
        {
        "testName" : "Test-3 : Unix Test"
        }, 
    ];
}

My Question is:

Currently the result is coming in the following format:

Test-1 : Windows Test
Test-2 : Linux Test
Test-3 : Unix Test

I want to display the Test-1 : Windows Test at beginning and after 30 seconds Test-2 : Linux Test and after 30 seconds Test-3 : Unix Test and so on..!!

Once all the data are completed again the Test-1 : Windows Test will come again..!!

How should I implement this with the AngularJS ?

@pankajparkar , You are correct. and OP please see my answer. i hopes my answer will solve your problem ;) — Ramesh Rajendran
– Ramesh Rajendran, Commented Apr 16, 2015 at 11:05

Ramesh Rajendran · Accepted Answer · 2015-04-16 11:25:26Z

3

You can do it by using set time interval ( $interval in angular.js) . I don't know how can i explain to you. But i will give my code with fiddler, You can see what i am did.

So try this below way instead of your code.

<div ng-app="myApp">
<div ng-controller="myCtrl">
   <p>{{testName}}</p>
</div>
</div>

Javascript changes

The below code working by eache 30 second( i don't know exactly 30 second), But you can put what time you need

    angular.module('myApp',[])
   .controller("myCtrl",["$scope","$interval",function($scope, $interval){
        $scope.tests = [{
            "testName" : "Test-1 : Windows Test"
            }, 
            {
            "testName" : "Test-2 : Linux Test"
            },          
            {
            "testName" : "Test-3 : Unix Test"
            } 
        ];
         var count=0;                    
         $interval(function(){                         
                $scope.testName=$scope.tests[count].testName;
                 count=count+1;
                if($scope.tests.length==count){
                  count=0;
                }                               
         },30000);   // I don't know it's exact 30 seconds     
    }]);

Sample JSFiddle Demo

I have updating proper code for you.

edited Apr 16, 2015 at 11:25

answered Apr 16, 2015 at 10:59

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pankaj Parkar Over a year ago

can you please update your code to use app.controller which would be the more correct way of doing code

Ramesh Rajendran Over a year ago

Okay wait few seconds

Collectives™ on Stack Overflow

Displaying Data after Time Interval in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related