Bir ifadeyi değerlendirerek özel bir HTML kimliği nasıl oluşturulur

Question

AngularJS ile "tic tac toe" bir sürümünü oluşturmaya ve olabildiğince minimal düzeyde çalışmaya çalışıyorum. Sorunum için tek çözüm, her düğmeye benzersiz bir kimlik atamaktır (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 size yani $index, çalışmak için çeşitli değişkenleri verir. ng-repeat docs üzerinde

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

diğer bilgiler: Durumda da böyle bir şey isteyeceksiniz.

İkinci Seçenek

Kullanım f ve i değişkenleri benzersiz kimlikleri oluşturun.

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

İşte bir demo.

Answer 2

Her düğmeye benzersiz bir kimlik atamanız gerekmez.

Bunun yerine, f geçebilir ve fonksiyonları içine i değişkenler tahta durumunu izlemek için: buraya

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

Çalışma keman: http://jsfiddle.net/m76w3kf5/

Answer 3

deneyin biçimlendirme ile bağlayıcı {{}} veya $ endeksi tıklama ile dizideki küçük resimler listeleme

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

veya $ indeksi biraz genişletilmiş bir örnek, endeks

tarafından konumunu referans

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