AngularJS如何基于JSON嵌套对象的maxDay生成序号表头？

你之前的问题在于，ng-repeat直接遍历了dayMonth月份数组，所以生成的列数和月份数量一致，但你实际需要的是基于每个月份的天数，生成1到该天数的表头列。下面给你几种符合需求的实现方式，根据实际场景选择：

场景1：生成一行通用表头（覆盖所有月份的最大天数） #

如果要做适配所有月份的日历表头（比如1-31天），可以先在控制器里计算出所有月份的最大天数，再生成对应的天数数组：

控制器代码

// 你的原始月份数据
$scope.dayMonth = [ 
  { "month": 1, "maxDay": 31 }, 
  { "month": 2, "maxDay": 28 }, 
  { "month": 3, "maxDay": 31 },
  // ... 其他月份数据
];

// 计算所有月份中的最大天数
const maxTotalDays = Math.max(...$scope.dayMonth.map(item => item.maxDay));
// 生成1到maxTotalDays的连续数字数组
$scope.daysHeader = Array.from({ length: maxTotalDays }, (_, idx) => idx + 1);

HTML代码

<tr>
  <th class="text-center nowrap" ng-repeat="day in daysHeader track by $index">
    {{ day }}
  </th>
</tr>

场景2：为每个月份单独生成一行天数表头 #

如果需要每个月份对应一行，每行的列数等于该月的天数，可以先给每个月份对象添加天数数组，再嵌套ng-repeat：

控制器代码

$scope.dayMonth = [ 
  { "month": 1, "maxDay": 31 }, 
  { "month": 2, "maxDay": 28 }, 
  // ... 其他月份数据
];

// 给每个月份生成1到maxDay的天数数组
$scope.dayMonth.forEach(monthItem => {
  monthItem.daysList = Array.from({ length: monthItem.maxDay }, (_, idx) => idx + 1);
});

HTML代码

<!-- 外层遍历月份，内层遍历该月的天数列 -->
<tr ng-repeat="month in dayMonth track by month.month">
  <th class="text-center nowrap" ng-repeat="day in month.daysList track by $index">
    {{ day }}
  </th>
</tr>

额外方案：用自定义过滤器简化（无需修改控制器） #

如果不想在控制器里处理数组，可以定义一个AngularJS过滤器来动态生成天数范围：

过滤器代码

angular.module('yourAppName').filter('dayRange', function() {
  return function(totalDays) {
    const days = [];
    for (let i = 1; i <= totalDays; i++) {
      days.push(i);
    }
    return days;
  };
});

HTML代码（单个月份示例，比如取第一个月份）

<tr>
  <th class="text-center nowrap" ng-repeat="day in dayMonth[0].maxDay | dayRange track by $index">
    {{ day }}
  </th>
</tr>

HTML代码（每个月份一行）

<tr ng-repeat="month in dayMonth track by month.month">
  <th class="text-center nowrap" ng-repeat="day in month.maxDay | dayRange track by $index">
    {{ day }}
  </th>
</tr>

内容的提问来源于stack exchange，提问作者Kondziowsky