AngularJS为动态表中的元素动态分配ID

Question

Is there a way in AngularJS that I can dynamically ID or in a dynamic table? I have this table that dynamically adds rows.

 <table class="table table-striped">
                    <thead>
                        <tr>
                            <th style="text-align:center">{{nameBlue}}</th>
                            <th style="text-align:center">Round</th>
                            <th style="text-align:center">{{nameRed}}</th>
                        </tr>
                    </thead>
                    <tbody class="tablerows">
                        <tr ng-repeat="x in tableArray track by $index">
                          <td>Red Corner</td>
                          <td>Round {{$index}}</td>
                          <td>Blue Corner</td>
                        </tr>
                      </tbody>
                </table>

and my script

 //Create the module
 var myApp = angular.module("myModule", []);



 //Create the controller and register the module in one line
 myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
$scope.selectedRounds = 0;


$scope.tableArray = [];
$scope.getRoundsArray = function() {
     $scope.tableArray = new Array( $scope.selectedRounds * 1);
  }
 });

So the amount of rows in the table are dynamically selected and added. Red Corner and Blue Corner will be replaced with drop down lists which have a 1 to 10 value. At the end of the table I will sum the drop down list values so I want to be able to do math on round1Red + round2Red .. and so on. Is there a way I can dynamically assign IDs to each when the table is created?

Answer 1

You can dynamically add IDs to the table like so:

 <tr ng-repeat="x in tableArray track by $index">
     <td id="redCorner{{$index}}">Red Corner</td>
     <td>Round {{$index}}</td>
     <td id="blueCorner{{$index}}">Blue Corner</td>
 </tr>

This should give you unique red and blue corner IDs for each row of the table in the form of redCorner0, blueCorner0, redCorner1... . Let me know if this helps.