javascript - 依次切换元素-显示一个，然后将其隐藏并显示下一个

假设我们有10盏灯（we use li tag）。我想像这样一个接一个地展示给他们：

<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
    <ul>
        <li class="dot">
        </li>
         <li class="dot">
        </li>
        <li class="dot">
        </li>
        <li class="dot">
        </li>
        <li class="dot">
        </li>
        <li class="dot">
        </li>
        <li class="dot">
        </li>

    </ul>
</div>

第一盏灯=亮

其余主题=关闭。

之后

第二盏灯=开

第一盏和其他灯熄灭

我怎样才能做到这一点？

小提琴：http://jsfiddle.net/RkykR/1237/

最佳答案

您可以使用$timeout延迟点亮点。如您所见，我使用递归函数来执行...

控制器

function MyCtrl($scope, $timeout) {
    $scope.lights = [0,1,2,3,4,5,6];
    $scope.currentLight = 0;

    function light(index){
        if($scope.lights.length < index) {
            light(0);
        } else {
            $scope.currentLight = index;
            $timeout(function(){
                light(++index);
            }, 1000);
        }
    }

    light(0);
}

的HTML

<h3>Light</h3>
<div ng-app ng-controller="MyCtrl">
    <ul ng-repeat="light in lights">
        <li class="dot" ng-class="{'red': $index == currentLight}">
        </li>
    </ul>
</div>