AngularJS中时间间隔后数据的显示

Question

下面是jsFiddle：AngularJS :显示数据的链接

我有HTML文件，如下所示：

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

.js文件下的控制器如下所示：

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"
        }, 
    ];
}

我的问题是：

目前，结果的格式如下：

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

我想显示Test-1 : Windows Test在开始和之后30秒Test-2 : Linux Test和30秒后Test-3 : Unix Test等等等等！

一旦所有数据再次完成，Test-1 : Windows Test就会再次出现！

我应该如何在AngularJS中实现这一点？

Answer 1

您可以使用设置的时间间隔( $interval in angular.js)来完成此操作。我不知道该怎么跟你解释。但我会给我的代码与小提琴，你可以看到我是做了什么。

所以用下面的方法来代替你的代码。

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

Javascript更改

下面的代码以30秒的速度工作(我不知道确切时间是30秒)，但是你可以把你需要的时间

    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     
    }]);

样本JSFiddle演示

我给你更新了正确的代码。