Angular: Empty Fiddle

http://angularjs.org/

by Nicolas PUJOL

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl" class="grille">
  <div ng-repeat="carre in grille" class="carre" ng-click="caseClick($index)">
    <span ng-show="carre !== -1">
          {{carre}}
    </span>
  </div>
  Tour: {{tour}}
</div>

CSS

.grille {
  width: 120px;
}

.carre {
  border: 1px solid;
  float: left;
  height: 20px;
  line-height: 20px;
  padding: 5px;
  text-align: center;
  width: 20px;
}

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
  setTimeout(function(){alert("You start");}, 300);
  var gagne = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [6, 4, 2]
  ];
  var end = false;
  var nb = 0;
  $scope.grille = [-1, -1, -1, -1, -1, -1, -1, -1, -1];
  $scope.tour = "O";
  $scope.caseClick = function(carre) {
    if (!end && $scope.grille[carre] === -1) {
    	nb++
      $scope.grille[carre] = $scope.tour;
      angular.forEach($scope.grille, function(value, index) {
      	if ($scope.grille[index] === -1) {
        	$scope.grille[index] = "X";
        }
      });
      end = true;
      $scope.tour = $scope.tour == "O" ? "X" : "O";
      setTimeout(function(){alert("You lose, I win");}, 300);
      
    }
  };
}