AngularJS dynamically assign IDs to elements in a dynamic table

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?

<td>Red Corner</td> and <td>Blue Corner</td> will have seperate IDs. Such as redRound[0] and blueRound[0] and so on — fubar92
– fubar92, Commented Feb 6, 2018 at 20:45
You can set the id based off $index variable like so: id="{{$index}}". Does that help? — MisterMystery
– MisterMystery, Commented Feb 6, 2018 at 20:51

MisterMystery · Accepted Answer · 2018-02-06 20:58:02Z

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.

answered Feb 6, 2018 at 20:58

MisterMystery

4127 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

fubar92 Over a year ago

I just came back to re add my solution from your advice. This is more or less what I used. Instead I used <td id="{{'redScore'+($index+1)}}">Red Corner</td> The only difference is the single quotations work inside {{}}. Thanks again

fubar92 Over a year ago

I also index+1 to start at 1.

Collectives™ on Stack Overflow

AngularJS dynamically assign IDs to elements in a dynamic table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related