Creating a dynamic table In HTML and AngularJS from contents of a Javascript array

Question

I need help creating a dynamic table in the format of a round robin competition using HTML and AngularJS. An array of strings will be given and then the table will be created based on how many names were in the list so part of the table will be generated dynamically and part of the table will always be the same. This is an example of a table that would be generated if I passed an array with 8 names. Only columns A, B, and C should have any information when the table is generated though I kept everything blank for simplicity's sake. The rest of the boxes should all be text input fields.

Until now most of the tables I have done have been pretty simple and I am a little out of my depth here, any help would be much appreciated.

charlietfl · Accepted Answer · 2016-09-15 16:57:16Z

1

Assuming you always have a full 8 teams this would get you started

<table>
  <tr>
    <th>club</th>
    <th>team</th>
    <th>#</th>
    <th ng-repeat="item in items">{{$index+1}}</th>
    <th>V</th>
    <th>TS</th>
  </tr>
  <tr ng-repeat="item in items">
    <td>{{item.club}}</td>
    <td>{{item.team}}</td>
    <td>{{item.rank}}</td>
    <td ng-repeat="item in items" ng-class="{black:$index==$parent.$index}"></td>
    <td><input ng-model="item.v"></td>
    <td><input ng-model="item.ts"></td>
  </tr>
</table>

DEMO

answered Sep 15, 2016 at 16:57

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

andrefisch Over a year ago

This was very helpful however the snippet ng-class="{black:$index==$parent.$index}" does not shade the boxes black like I would expect, in fact it does not appear to do anything. Is the syntax correct?

charlietfl Over a year ago

works fine in my demo doesn't it? You have to use a css rule for that class

andrefisch Over a year ago

it was a formatting error when copied in, thanks for the help!

charlietfl Over a year ago

should consider accepting an answer sometime if they helped you

plong0 · Accepted Answer · 2016-09-15 16:59:43Z

0

This is a really nice example of using nested ng-repeat elements.

Please see this plunker for a working demo.

The main trick for detecting when to black out a box is to use ng-init="$rowIndex=$index" on the outer ng-repeat (where we generate a row for each entry). This allows the inner ng-repeat (where we generate a column for each entry) to have an ng-class="{'blackout': $index==$rowIndex}"

answered Sep 15, 2016 at 16:59

plong0

2,1891 gold badge19 silver badges19 bronze badges

Collectives™ on Stack Overflow

Creating a dynamic table In HTML and AngularJS from contents of a Javascript array

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related