在 AngularJS 时间间隔后显示数据

Question

这是 jsFiddle 的 Link：AngularJS : Display Data

我有 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

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

一旦所有数据再次完成，Test-1 : Windows Test将再次出现..!!

我应该如何使用 AngularJS 实现这个？

Answer 1

您可以使用设置的时间间隔（$interval in angular.js）。我不知道我该如何向你解释。但是我会用 fiddler 给出我的代码，你可以看到我做了什么。

所以试试下面的方法而不是你的代码。

<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 Demo

我已经为您更新了正确的代码。

在 AngularJS 时间间隔后显示数据

Displaying Data after Time Interval in AngularJS

javascript

angularjs

angularjs-ng-repeat

ng-controller