在列 'td' 上使用 ng-repeat 时如何更改 table 的行（如果可能）

Question

我正在创建一个 table。首先，我连续 7 列（星期日，星期一......）。现在在 tbody 的行中，我将列重复为天数（我有 30 天）。它重复了该单曲中的所有 30 个项目（正如我们所知）。所以我想要的是，我只需要 body.then 那一行的前七项，下一行的七项，依此类推。解决方案会有帮助吗？这是我的标记

<table class="table table-bordered">
<thead>
    <th>Sunday</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thursday</th>
    <th>Friday</th>
    <th>Saturday</th>                                
</thead>
<tbody>
    <td ng-repeat="day in staticEvents"><span>{{day.title}}</span></td>
</tbody>

$scope.staticEvents 是一个包含 30 个对象的数组（API 响应）。

Answer 1

我创建了一个 fiddle 希望对您有所帮助。你可以通过 $index 来做到这一点。

    <div data-ng-app="" data-ng-init="days=['1','2','3','4','5','6','7','8','9','10','11','..']" class="container">
  <table class="table table-bordered">
    <thead>
      <th>Sunday</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </thead>
    <tbody>
      <tr ng-repeat="day in days" ng-if="$index % 7 == 0">
        <td class="col">{{days[$index]}}</td>
        <td class="col">{{days[$index + 1]}}</td>
        <td class="col">{{days[$index + 2]}}</td>
        <td class="col">{{days[$index + 3]}}</td>
        <td class="col">{{days[$index + 4]}}</td>
        <td class="col">{{days[$index + 5]}}</td>
        <td class="col">{{days[$index + 6]}}</td>

      </tr>
    </tbody>
  </table>

</div>

Fiddle

Answer 2

我建议稍微更改一下您的数据结构。对于一个简单的数组，很难通过 ng-if 或 ng-switch 的一次迭代来制作多行 table。此外，通过这种数据结构设计，您将始终拥有 1 号星期日，2 号星期一，...

尝试制作二维数组，您可以在其中准备 "month" 然后通过两次 ng-repeats 进行。类似于：

控制器：

$scope.month = makeMonth($scope.staticEvents, 3);

function makeMonth(days, firstIndex) {
// days[] - array of days in month 
//fisrstIndex - index of the first day in month: 0=Sunday, ..., 6=Saturday
    if (!angular.isArray(days) || firstIndex < 0 || firstIndex > 6) {
        return [];
    }
    var month = [];
    var row = [];
    for (i=0; i < days.length + firstIndex; i++) {
        var day = {
            title: ""
        };
        if (i >= firstIndex) {
            day = days[i - firstIndex];
        }
        row.push(day);
        if (i % 7 === 6) {
            month.push(row);
            row = [];
        }
    }
    if (row != []) {
        month.push(row);
    }
    return month;
}

模板：

<table class="table table-bordered">
    <thead>
        <th>Sunday</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
        <th>Saturday</th>                                
    </thead>
    <tbody>
        <tr ng-repeat="row in month">
            <td ng-repeat="day in row"><span>{{day.title}}</span></td>
        </tr>
    </tbody>
</table>

在列 'td' 上使用 ng-repeat 时如何更改 table 的行（如果可能）

How to change row of table when using ng-repeat on a column 'td'(if it is possible)

javascript

angularjs

ng-repeat

angularjs-ng-repeat