Toggle elements in sequence - show one, then hide it and show the next

Question

Let's say we have 10 lights ( we use li tag ) . I want to show them one by one like this :

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

First light = on

rest of theme = off .

after that

second light = on

First and other lights = off

How can i achieve this ?

Fiddle : http://jsfiddle.net/RkykR/1237/

Answer 1

This first example toggles through the elements manually on each click of the button.

Live demo (click here).

<div ng-app="myApp" ng-controller="MyCtrl">
  <button ng-click="switch()">Switch</button>
  <ul>
    <li class="item" ng-class="{on: $index === selectedIdx}" class="item" ng-repeat="item in items track by $index"></li>
  </ul>
</div>

.item {
    background:red;
    width:5px;
    height:5px;
    list-style:none;
    margin-bottom:5px;
    visibility: hidden;
}

.on {
  visibility: visible;
}

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  // make array with 10 items
  $scope.items = new Array(10);
  $scope.selectedIdx = 0;
  $scope.switch = function() {
    ++$scope.selectedIdx;
    if ($scope.selectedIdx === $scope.items.length) {
      $scope.selectedIdx = 0;
    }
  };
})
;

Here is another version where the lights move automatically and can be stopped and started again with the button Live demo (click here) :

<div ng-app="myApp" ng-controller="MyCtrl">
  <button ng-click="switch()">{{timer ? 'Stop' : 'Start'}}</button>
  <ul>
    <li class="item" ng-class="{on: $index === selectedIdx}" class="item" ng-repeat="item in items track by $index"></li>
  </ul>
</div>

angular.module('myApp', [])
.controller('MyCtrl', function($scope, $interval) {
  // make array with 10 items
  $scope.items = new Array(10);
  $scope.selectedIdx = null;

  $scope.timer = null;
  $scope.switch = function() {
    $scope.timer ? stop() : start();
  };

  function stop() {
    $interval.cancel($scope.timer);
    $scope.timer = null;
  }

  function start() {
    $scope.timer = $interval(function() {
      $scope.selectedIdx = $scope.selectedIdx === null ? 0 : $scope.selectedIdx+1;
      if ($scope.selectedIdx === $scope.items.length) {
        $scope.selectedIdx = 0;
      }
    }, 500);
  }

  start();

})
;

Answer 2

You can use $timeout for lighting dots with a delay. So as you will see I use a recursive function to do...

CONTROLLER

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>

Answer 3

Actually, this must be a small development exercise, that you are assigned to do in your class. So, I would normally not answer these kind of questions. However, since I am in a merry mood, I just updated your JSFiddle.

But do try your best to figure this out on your own. There are 1000 ways you can implement this. But below is a simple answer.

function MyCtrl($scope) {
$scope.activeLight = 3;
$scope.data = [1,2,3,4,5,6,7];
$scope.update = function(index) {
    $scope.activeLight = index;
};

Click here for the updated fiddle << Please, try yourself before you just click this :) Just a friendly advice. Also, try a bit and add timer to run this automatically.