Come creare un ID HTML personalizzato valutando un'espressione

Question

Cerco di creare una versione di "tic tac toe" con AngularJS e di essere il più minimale possibile. L'unica soluzione per il mio problema è assegnare ad ogni pulsante un ID univoco (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 ti dà diverse variabili con cui lavorare, e cioè $index. Nel tuo caso si vorrà qualcosa di simile:

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

Maggiori informazioni sul ng-repeat docs.

Seconda Opzione

Utilizzare i f e i variabili per creare ID univoci.

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

Ecco uno demo.

Answer 2

Non è necessario assegnare a ciascun pulsante un ID univoco.

Invece, è possibile passare il vostro F e I variabili nelle vostre funzioni per tenere traccia dello stato di scheda: violino

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

Lavorare qui: http://jsfiddle.net/m76w3kf5/

Answer 3

prova vincolante con markup {{}} o $ index

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

o un esempio leggermente esteso con indice $, elencando miniature nella matrice con scatti di riferimento di posizione per indice

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