CODEWITHSUNDEEP
htmlangularjshtml-table
andrefisch
andrefisch

Reputation: 11

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

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.

enter image description here

Upvotes: 1

Views: 439

Answers (2)

plong0
plong0

Reputation: 2188

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

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

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

Upvotes: 1

Related Questions