Jak utworzyć niestandardowy identyfikator HTML przez oszacowanie wyrażenia

Question

Próbuję stworzyć wersję "tic tac toe" z AngularJS i być tak minimalistycznym, jak to tylko możliwe. Jedynym rozwiązaniem mojego problemu jest przypisanie każdemu przyciskowi unikalnego identyfikatora (f + i).

HTML

<table> 
    <tr ng-repeat="f in [5,10,15]"> 
     <!-- numbers chosen for unique combos--> 
     <td ng-repeat="i in [0,1,2]"> 
      <button ng-click="toTrue()" > 
       <div > 
        {{getXO()}} 
       </div> 
      </button> 
     </td> 
    </tr> 
</table> 

JavaScript

$scope.XObool=false; 
$scope.toTrue = function() { 
    if(!$scope.XObool){ 
     $scope.XObool=true; 
    } 
    else if($scope.XObool) { 
     $scope.XObool=false; 
    } 
}; 
$scope.getXO = function(){ 
    if($scope.XObool){ 
     return 'X'; 
    } 
    else { 
     return 'O'; 
    } 
}; 

Answer 1

ng-repeat daje kilka zmiennych do pracy, a mianowicie $index. W twoim przypadku będziesz potrzebować czegoś takiego:

<button id="{{$index}}" ...> 

Więcej informacji na temat ng-repeat docs.

Druga opcja

pomocą f i i zmienne do tworzenia unikatowych identyfikatorów.

<table ng-app> 
    <tr ng-repeat="f in [5,10,15]" data-id="{{$index}}"> 
    <td ng-repeat="i in [0,1,2]"> 
     <button id={{'id' + (i+f)}} ng-click="toTrue()"> 
     {{'id'+(i+f)}} 
     </button> 
    </td> 
    </tr> 
</table> 

Oto demo.

Answer 2

Nie trzeba przypisywać każdemu przyciskowi unikalnego identyfikatora.

Zamiast tego można zdać F i I zmienne do swojej funkcji, aby śledzić stan Nadzorczej: skrzypce

<table> 
     <tr ng-repeat="f in [0,1,2]"> 
      <!-- numbers chosen for unique combos--> 
     <td ng-repeat="i in [0,1,2]"> 
      <button ng-click="setState(f, i)"> 
      <div > 
       {{ getXO(f,i) }} 
      </div> 
     </button> 
     </td> 

     </tr> 
    </table> 

pracy tutaj: http://jsfiddle.net/m76w3kf5/

Answer 3

próba wiązania ze znacznikami {{}} lub $ index

<div id="{{someObject.id}}" class="some-class" ng-repeat="f in [ array ]"> 
.. 
</div> 

lub nieco rozszerzony przykład z $ index, wymieniając miniatury w tablicy z kliknięć odwołać pozycję indeksu

<tr ng-repeat="array in thumbnails track by $index"> 
    <td ng-repeat="object in array track by object.id" 
     ng-click="tableClickHandler($index, object)"> 

    <img class="user-thumbnail" src="{{object.src}}"> 

    </td> 
</tr>