AngularJS在列中使用ng-repeat填充表

Question

我有几周的日子作为标题栏：

我每天都有一个数组：

$scope.mondays = [];

我想用数组的值填充每列。我将如何使用它来代替列？

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

我尝试过这种方式，但它只是将它添加到同一列：

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

创建了修复：

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

Answer 1

为了让日期保持同步，您只想重复一次，但要跟踪您在列表中的位置，以便每行都是一周。为此，您可以添加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>

为了实际工作，每天数组需要相同的长度，顺序需要正确。更清晰的实现可能是按周存储数据。

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

然后：

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