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 （ 文檔 ）中添加一個track by $index

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