內容已更改的角度禁用按鈕

我正在構建一個tic tac腳趾遊戲，其中我與AI進行對戰。當我點擊它們時，我可以禁用這些按鈕，但當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: '' } 
    ]; 
} 
});

來源

2015-11-29 Grzes Slania

我創建了一個jsbin，我希望，這是你想要的。 Unfortuanately，codepen正在採取太多的時間來加載

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

我綁定細胞禁用財產殘疾人財產。因此，當用戶選擇一個單元格或AI，細胞Disabled屬性將被設置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; 
     }

JS彬jsbin.com

來源

2015-11-29 18:58:17

是的，那正是我所需要的。我做過類似的事情，但我沒有爲'cell'對象添加一個'disabled'屬性。 –

很高興知道這一點..選擇你的最佳答案，然後把這個問題扔進垃圾箱 –

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

來源

2015-11-29 18:44:01 vinayakj

這並沒有 –

你可以創建一個工作的jsfiddle，如此精確的控制檯錯誤可以看出 – vinayakj

它似乎工作，再次檢查 – vinayakj

內容已更改的角度禁用按鈕

回答

相關問題