javascript - 如何通过评估表达式来制作自定义 HTML id

Question

我尝试使用 AngularJS 制作一个版本的“井字游戏”，并尽可能简约。我的问题的唯一解决方案是为每个按钮分配一个唯一的 ID (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 为您提供了几个要使用的变量，即 $index。在你的情况下你会想要这样的东西:

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

有关 ng-repeat docs 的更多信息.

第二个选项

使用 f 和 i 变量创建唯一 ID。

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

这是一个 demo .