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>中的数据应在myCtrl.elementList的元素之间循环，间隔为1秒。 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;
    });
});

如何让Angular / HTML在ng-repeat循环之间等待1秒？

1 个答案: