如何在ng-repeat周期之间让Angular/HTML等待1秒钟？

Question

我有以下AngularJS/HTML代码：

<tbody> 
    <tr ng-repeat="currElement in myCtrl.elementList track by $index" > 
    <td ng-class-odd="'element-tilt-left'" ng-class-even="'element-tilt-right'"> 
     <a ui-sref="myState({elementId: currElement.elementId)" ng-bind="currElement.name"> 
     </a> 
    </td> 
</tr> 
</tbody> 

而是具有多行的表，我想一个表，只有一行。该行的<td>中的数据应以1秒的间隔在myCtrl.elementList的元素之间循环。 IE：显示的数据应该在每秒钟后更改。元素耗尽之后，它应该回到那个列表的开始处并且永远重复。

我该怎么办呢？

Answer 1

而不是使用ng-repeat的，做这样的事情：

<tr> 
    <td ng-class="{ 'element-tilt-left': myCtrl.currentIndex % 2 == 1, 'element-tilt-right': myCtrl.currentIndex % 2 == 0}"> 
     <a ui-sref="myState({elementId: myCtrl.currElement.elementId)" 
      ng-bind="myCtrl.currElement.name"> 
     </a> 
    </td> 
</tr> 

而在你的控制器：

app.controller("myCtrl", function($scope, $interval) { 

    var _self = this; 

    _self.elementList = [ 
     // some array with your data 
    ]; 

    _self.currentIndex = 0; 

    _self.currentElem = _self.elementList[_self.currentIndex]; 

    var currentElementInterval = $interval(function() { 
     _self.currentIndex++; 
     if(_self.currentIndex >= _self.elementList.length) { 
      _self.currentIndex = 0; 
     } 

     _self.currentElem = _self.elementList[_self.currentIndex]; 
    }, 1000); 

    // remember to clear the interval to prevent memory leaks 
    $scope.$on("destroy", function() { 
     $interval.cancel(currentElementInterval); 
     currentElementInterval = undefined; 
    }); 
});