AngularJS Populate Table with ng-repeat in columns

Question

I have table with days of the weeks as heading column:

I have an array of each day like so:

$scope.mondays = [];

I want to populate each column with the value of the array. How would i use to this to use it for the columns instead?

echo "<tbody>";
echo "<tr id='schedule_row' ng-repeat='tv_show in tv_shows | orderBy:sortType:sortReverse'>";
echo "<td>{{tv_show.show_name}}</td>"; // Show Names column
echo "</tr>";
echo "</tbody>";

I attempted it this way but it just added it to the same column:

echo "<tbody>";
echo "<tr id='mondays' ng-repeat='monday in mondays'>";
echo "<td>{{monday}}</td>";
echo "</tr>";
echo "<tr id='tuesdays' ng-repeat='tuesday in tuesdays'>";
echo "<td>{{tuesday}}</td>";
echo "</tr>";
echo "<tr id='wednesdays' ng-repeat='wednesday in wednesdays'>";
echo "<td>{{wednesday}}</td>";
echo "</tr>";
echo "<tr id='thursdays' ng-repeat='thursday in thursdays'>";
echo "<td>{{thursday}}</td>";
echo "</tr>";
echo "<tr id='fridays' ng-repeat='friday in fridays'>";
echo "<td>{{friday}}</td>";
echo "</tr>";
echo "<tr id='saturdays' ng-repeat='saturday in saturdays'>";
echo "<td>{{saturday}}</td>";
echo "</tr>";
echo "<tr id='sundays' ng-repeat='sunday in sundays'>";
echo "<td>{{sunday}}</td>";
echo "</tr>";
echo "</tbody>";

Created a fix:

echo "<tbody>";
echo "<tr>";
echo "<td>";
echo "<li class='li_class' ng-repeat='monday in mondays'>{{monday}}</li>";
echo "</td>";
echo "<td>";
echo "<li class='li_class' ng-repeat='tuesday in tuesdays'>{{tuesday}}</li>";
echo "</td>";
echo "<td>";
echo "<li class='li_class' ng-repeat='wednesday in wednesdays'>{{wednesday}}</li>";
echo "</td>";
echo "<td>";
echo "<li class='li_class' ng-repeat='thursday in thursdays'>{{thursday}}</li>";
echo "</td>";
echo "<td>";
echo "<li class='li_class' ng-repeat='friday in fridays'>{{friday}}</li>";
echo "</td>";
echo "<td>";
echo "<li class='li_class' ng-repeat='saturday in saturdays'>{{saturday}}</li>";
echo "</td>";
echo "<td>";
echo "<li class='li_class' ng-repeat='sunday in sundays'>{{sunday}}</li>";
echo "</td>";
echo "</tr>";
echo "</tbody>";

Alexandre Aimbiré · Accepted Answer · 2019-02-27 04:33:19Z

To keep the days in sync, you'll want to repeat only once but keep track of your position in the list so that each row is a week. To accomplish this, you can include a track by $index (documentation)

<tbody>
  <tr id="week{{$index}}" ng-repeat="monday in mondays track by $index">
    <td id="monday{{$index}}">{{mondays[$index]}}</td>
    <td id="tuesday{{$index}}">{{tuesdays[$index]}}</td>
    <td id="wednesday{{$index}}">{{wednesdays[$index]}}</td>
    <td id="thursday{{$index}}">{{thursdays[$index]}}</td>
    <td id="friday{{$index}}">{{fridays[$index]}}</td>
    <td id="saturday{{$index}}">{{saturdays[$index]}}</td>
    <td id="sunday{{$index}}">{{sundays[$index]}}</td>
  </tr>
</tbody>

For this to actually work, each day array will need to be the same length and the order will need to be correct. A cleaner implementation might be to store the data by week.

var weeks = [{monday:"mondayValue", tuesday:"tuesdayValue", ... sunday:"sundayValue"}];

Then:

<tr id="week{{$index}}" ng-repeat="week in weeks track by $index">
  <td id="monday{{$index}}">{{week.monday}}</td>
  ...
</tr>

Collectives™ on Stack Overflow

AngularJS Populate Table with ng-repeat in columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related