如何让Angular/HTML在ng-repeat循环之间等待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;
    });
});