AngularJS - ボタンは、トグルを停止し、1つのタイルだけをクリックする機能を有効にします。

Question

144個の要素（divs）を持つタイルボードがあります。これまで、トグル機能を適用して、これらのタイルのいずれかを選択して色を変更することができます。それはうまく動作します。

main.htmlと：

<div class="container" ng-controller='BoardController'> 
    <div id="content"> 
     <div ng-style="boardStyle" class="board"> 
     <div ng-repeat="i in getNumber(tiles) track by $index" 
      ng-click="changeToogle($index)" ng-init="initToogle($index)" 
      ng-model="status[$index]" ng-style="status[$index]?tileStyle:lockStyle"></div> 
     </div> 
    </div> 

    <nav id="sideNav"> 
     <h3>Controls</h3> 
     <div class="btn-wrapper"> 
     <a ng-href="#" ng-click="startSelect()" id="start" class="button">Start</a> 
     <a href="#" id="end" class="button">End</a> 
     <a href="#" id="go" class="button not-active">GO!</a> 
     </div> 
    </nav> 
</div> 

boardcontroller.js：で

angular.module('warmup').controller('BoardController', function($scope) { 

    $scope.tiles = 144; 
    $scope.status = []; 
    $scope.getNumber = function(num) { 
     return new Array(num); 
    } 

    var boardHeight = window.innerHeight/3; 
    var boardWidth = boardHeight; 

    var tileHeight = boardHeight/12 - .3; 
    var tileWidth = tileHeight; 

    $scope.boardStyle = { 
     "height" : boardHeight + 'px', 
     "width" : boardWidth + 'px', 
     "border" : "1px solid #AAA" 
    } 

    var colors = [ 
     {name: "principal", color: "red"}, 
     {name: "locker", color: "blue"}, 
     {name: "path", color: "green"} 
    ]; 

    $scope.tileStyle = { 
     "height" : tileHeight + 'px', 
     "width" : tileWidth + 'px', 
     "border" : "1px solid #CCC", 
     "background-color": colors[0].color, 
     "float": "left" 
    } 

    $scope.lockStyle = { 
     "height" : tileHeight + 'px', 
     "width" : tileWidth + 'px', 
     "border" : "1px solid #CCC", 
     "background-color": colors[1].color, 
     "float": "left" 
    } 
    // TOGGLE FUNCTIONS 
    $scope.changeToogle = function($index) { 
     $scope.status[$index] = !$scope.status[$index]; 
    } 

    $scope.initToogle = function($index) { 
     $scope.status[$index] = true; 
    } 

    //FUNCTION TO SET THE START POINT 
    $scope.startSelect = function(){ 
     console.log("click"); 
    //HERE IS THE PROBLEM  
    }  
    }); 

私はそれがクリックされると、ボタンid="start"を、持っている、startSelect関数を呼び出します。私は、この関数は2つのことを行う必要があります。

1. はトグル機能を停止します（ユーザーが 前にこのステップをトグルを使用する必要があり、クリックされたタイルはlockStyle スタイルにkeepedする必要があります）

2. ユーザは、タイルを1つだけ選択してクリックすることができます。ユーザーが をクリックした後、別のタイルをクリックすると、2番目の だけが考慮されるべきです（最初の選択は解除されるか、 と思われます）。下の画像は、選択したタイルを緑色で示しています。

Answer 1

（isStatusSelected変数を追加し、あなたの機能でそれを使用） main.htmlと、これを試してみてください。

<div class="container" ng-controller='BoardController'> 
    <div id="content"> 
     <div ng-style="boardStyle" class="board"> 
     <div ng-repeat="i in getNumber(tiles) track by $index" 
      ng-click="changeToogle($index)" ng-init="initToogle($index)" 
      ng-model="status[$index]" ng-style="style($index)"></div> 
     </div> 
    </div> 

    <nav id="sideNav"> 
     <h3>Controls</h3> 
     <div class="btn-wrapper"> 
     <a ng-href="#" ng-click="startSelect()" id="start" class="button">Start</a> 
     <a href="#" id="end" class="button">End</a> 
     <a href="#" id="go" class="button not-active">GO!</a> 
     </div> 
    </nav> 
</div> 

boardcontroller.js：

angular.module('warmup').controller('BoardController', function($scope) { 

    $scope.tiles = 144; 
    $scope.status = []; 
    $scope.getNumber = function(num) { 
     return new Array(num); 
    } 

    var isStatusSelected = false; 

    var boardHeight = window.innerHeight/3; 
    var boardWidth = boardHeight; 

    var tileHeight = boardHeight/12 - .3; 
    var tileWidth = tileHeight; 

    $scope.boardStyle = { 
     "height" : boardHeight + 'px', 
     "width" : boardWidth + 'px', 
     "border" : "1px solid #AAA" 
    } 

    var colors = [ 
     {name: "principal", color: "red"}, 
     {name: "locker", color: "blue"}, 
     {name: "path", color: "green"} 
    ]; 

    $scope.style = function ($index) { 
     if (!$scope.status[$index]) { 
      $scope.status[$index] = 0; 
     }  
     return { 
      "height" : tileHeight + 'px', 
      "width" : tileWidth + 'px', 
      "border" : "1px solid #CCC", 
      "background-color": colors[$scope.status[$index]].color, 
      "float": "left" 
     } 
    } 

    // TOGGLE FUNCTIONS 
    $scope.changeToogle = function($index) { 
     if (isStatusSelected) { 
      for (var i in $scope.status) { 
       if ($scope.status[i] === 2) { 
        $scope.status[i] = 0; 
       } 
      } 
      $scope.status[$index] = 2; 
     } else { 
      $scope.status[$index] = ($scope.status[$index] === 0 ? 1 : 0); 
     } 

    } 

    $scope.initToogle = function($index) { 
     $scope.status[$index] = true; 
    } 

    //FUNCTION TO SET THE START POINT 
    $scope.startSelect = function(){ 
     isStatusSelected = !isStatusSelected; 
     console.log("click"); 
    //HERE IS THE PROBLEM  
    }  
    });