AngularJS $timeout Test

by thomporter

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app>
  <h2>AngularJS Timeout Test</h2>
  <div ng-controller="TestCtrl">
      <ol>
          <li ng-repeat="pic in pics" ng-class="{active:$index==picIndex}">
              <img src="{{pic.src}}" />
              <div class="caption">{{pic.caption}}</div>
          </li>
      </ol>
      <a ng-click="prevPic()">Back</a> | <a ng-click="nextPic()">Next</a>
      <br />
      Pic Index: {{picIndex}}
  </div>
</div>

CSS

ol {
    position: relative;
    width: 500px;
    height: 282px;
}
li {
    position: absolute;
    width: 500px;
    height: 282px;
    display: none;
    overflow: hidden;
}
li.active {
    display: block;
}
li a,li a:visited {
    position: absolute;
    display: block;
    bottom: 0;
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    color: #fff;
}

JavaScript

function TestCtrl($scope, $timeout) {
  $scope.picIndex = 0
  var picTimeout = false
  $scope.pics = [
    {caption:'Let it Snow', src:'http://farm9.staticflickr.com/8521/8470348773_c3daba2f74.jpg'},
    {caption:'Meow', src:'http://farm9.staticflickr.com/8449/7947266722_d70d325e60.jpg'},
    {caption:'Woof', src:'http://farm3.staticflickr.com/2802/4366323820_bc970ca0b7.jpg'},
  ];
      
  $scope.nextPic = function() {
      $timeout.cancel(picTimeout)
      if (++$scope.picIndex >= $scope.pics.length) $scope.picIndex=0
      picTimeout = $timeout($scope.nextPic, 2000)
  }
      
  $scope.prevPic = function() {
      $timeout.cancel(picTimeout)
      if (--$scope.picIndex < 0 ) $scope.picIndex=$scope.pics.length-1
      picTimeout = $timeout($scope.nextPic, 2000)
  }
  picTimeout = $timeout($scope.nextPic, 2000)
  
}