Question

我正在构建一个与人工智能对战的tic tac toe游戏。我可以在单击它时禁用按钮，但是当AI更改其按钮的内容时（AI在技术上不点击按钮）则不能。我想知道如何在Angular中解决这个问题。我可以在jquery / javascript中完成它，但无法在Angular中找到它。 http://codepen.io/theMugician/pen/meNeoJ?editors=101

<body ng-app="ticTacToe" ng-controller="MainCtrl">

  <div class="container choose">
    <div class="row text-center">
      <h1>CHOOSE A SHAPE</h1>
      <button ng-click="choosePlayer($event)" class="btn btn-red" id="choose-cross">✖</button>
      <button ng-click="choosePlayer($event)" class="btn btn-green" id="choose-circle">◯</button>
    </div>
  </div>

  <div id="wrapper" class="container text-center">
    <div class="row">
      <button ng-click="move(cell);isDisabled=true" ng-disabled="isDisabled" ng-repeat="cell in cells" class="col-xs-4 square text-center">
        {{cell.value}}
      </button>
    </div>

  </div>

</body>

var app = angular.module("ticTacToe", []);
app.controller("MainCtrl", function($scope){
  var cell = $(".square");
  $scope.player = "";
  $scope.AI = "";
  var cross = "✖";
  var circle = "◯";

  /*** Choose a shape ***/
  $scope.choosePlayer = function(e) {
  $scope.player = $(e.currentTarget).text();
        $('.choose').css('top', '-2000px');
        $('#wrapper').css('top', '-600px');
        $('#wrapper').css('opacity', '1');

    if($scope.player === cross){
    $scope.AI = circle;
    }else if($scope.player === circle){
    $scope.AI = cross;
  }
}

  /*** Shape Cells ***/
  $scope.cells = [ { value: '' }, { value: '' }, { value: '' }, 
     { value: '' }, { value: '' }, { value: '' } ,
    { value: '' }, { value: '' }, { value: '' }  
  ];
  // made a ref to scope cells
  $scope.emptyCells = $scope.cells;
  $scope.filledCells = $scope.cells;

  //disable cells with "✖" or "◯" <---- Can't figure this out
    for(cell in $scope.filledCells){
      if(cell.value === '✖' || cell.value === '◯'){
        cell.isDisabled = true;
      }
    }

  //$scope.disable();
  /*** Make a move ***/
  $scope.move = function(cell){
    cell.value = $scope.player;
    var round = 0;
    /*** AI makes a move ***/
    while(round < 1){
     // filtered to get only available cells (for performance)
      $scope.emptyCells = $scope.cells.filter(function(cell){
        return cell.value === '';
      });
      // got random cell according to empty cells
      var randomCell =  $scope.emptyCells[Math.floor((Math.random()*($scope.emptyCells.length-1))+1)];
      if(randomCell.value === "" ){
      randomCell.value = $scope.AI;
      round = 1;
      }else{
        round = 0;
      } 
    }
  $scope.checkResults();
  };
var winningNums = [
    [0,1,2],
    [3,4,5],
    [6,7,8],
    [0,3,6],
    [1,4,7],
    [2,5,8],
    [0,4,8],
    [2,4,6]
   ];


  //checks if values are the same
  $scope.checkResults = function(){
    var allCells = $scope.cells;
    for(var i = 0; i < winningNums.length; i++){
        var a = winningNums[i][0],b=winningNums[i][1],c=winningNums[i][2];
        var cell1 = allCells[a].value, cell2 = allCells[b].value, cell3 = allCells[c].value;
      if(cell1 == "" || cell2 == "" || cell3 == "" ){
        break;
      }
        if(cell1 === cell2 && cell2 === cell3 ){
            var winnerDiv = "<div><h1>" + cell1 + " is the winner</h1></div>";
          $(
"#wrapper").append(winnerDiv);
        }

      }

  }

$scope.reset = function(){
  $scope.cells = [ { value: '' }, { value: '' }, { value: '' }, 
     { value: '' }, { value: '' }, { value: '' } ,
    { value: '' }, { value: '' }, { value: '' }  
  ];
}
});

Answer 1

我创建了一个jsbin，我希望，这是你想要的。不幸的是，codepen花费了太多时间来加载

https://jsbin.com/xawode/edit?output

我将disabled属性与cell disabled属性绑定。因此，当用户选择单元格或AI时，将禁用单元格禁用属性true

var randomCell =  $scope.emptyCells[Math.floor((Math.random()*($scope.emptyCells.length-1))+1)];
      if(randomCell.value === "" ){
      randomCell.value = $scope.AI;
        randomCell.disabled = true;
      round = 1;
      }else{
        round = 0;
      }

jsbin.com上的JS Bin

Answer 2

使用isDisabled作为单元格对象的属性

<button ng-click="move(cell);cell.isDisabled=true" 
        ng-disabled="cell.isDisabled" ng-repeat="cell in cells" 
        class="col-xs-4 square text-center">
        {{cell.value}}
</button>

Angular ng-disable按钮，当内容发生变化时

2 个答案: