AngularJS渲染JSON数据到HTML表格的列匹配问题求助

首先，咱们先分析下你当前代码的问题所在：

1. 运算符错误：你写的ng-if='i.day="01"'用的是赋值符号=，不是比较符号==/===，这会导致每次判断都把i.day强制设为"01"，所以整行所有列都会显示同一天的数据。
2. 循环结构逻辑错误：你用ng-repeat="i in x"遍历每个数据项生成一行，这样每个日期的数据会单独占一行，而不是同一月份的所有日期数据在同一行的不同列里。

接下来给你完整的解决方案，分为数据预处理和HTML结构优化两部分：

步骤1：在AngularJS控制器中预处理数据 #

首先要把你的原始JSON数据按月份分组，每个月份下建立日期到SGST值的映射，这样后续表格可以快速根据月份和日期取值。

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
    // 先把你提供的JSON修正为合法的数组格式
    var rawData = [
        {sgst: "5008688.00", month: "Jan", day: "01"},
        {sgst: "0.00", month: "Aug", day: "01"},
        {sgst: "5392323.00", month: "Sep", day: "01"},
        {sgst: "630872.00", month: "Oct", day: "01"},
        {sgst: "3258562.00", month: "Nov", day: "01"},
        {sgst: "4985962.00", month: "Dec", day: "01"},
        {sgst: "43685.00", month: "Aug", day: "02"},
        {sgst: "1591974.00", month: "Sep", day: "02"},
        {sgst: "3003474.00", month: "Oct", day: "02"},
        {sgst: "2409776.00", month: "Nov", day: "02"},
        {sgst: "3567207.00", month: "Dec", day: "02"},
        {sgst: "31965.00", month: "Aug", day: "03"},
        {sgst: "236068.00", month: "Sep", day: "03"},
        {sgst: "6869161.00", month: "Oct", day: "03"},
        {sgst: "5424188.00", month: "Nov", day: "03"},
        {sgst: "113323.00", month: "Dec", day: "03"}
    ];

    // 按月份分组，存储为 {月份: {日期: SGST值}} 的结构
    $scope.monthlyData = {};
    rawData.forEach(item => {
        const month = item.month;
        const day = item.day;
        if (!$scope.monthlyData[month]) {
            $scope.monthlyData[month] = {};
        }
        // 把字符串转为数字，方便后续计算
        $scope.monthlyData[month][day] = parseFloat(item.sgst);
    });

    // 提取所有月份，用于遍历生成表格行
    $scope.months = Object.keys($scope.monthlyData);

    // 生成1-31的数组，用于循环生成日期列
    $scope.getDaysArray = function(n) {
        return Array.from({length: n}, (_, i) => i + 1);
    };

    // 将数字日期转为两位字符串（比如1→"01"），匹配数据里的日期格式
    $scope.formatDay = function(day) {
        return day.toString().padStart(2, '0');
    };
});

步骤2：修改HTML表格结构 #

现在我们可以基于预处理后的数据，生成正确的表格：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <!-- 引入AngularJS库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="myController">
<div class="container">
    <div class="table-bordered table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <!-- 循环生成1-31的日期表头 -->
                    <th ng-repeat="day in getDaysArray(31) track by $index">{{day}}</th>
                </tr>
            </thead>
            <tbody>
                <!-- 遍历每个月份生成一行 -->
                <tr ng-repeat="month in months">
                    <td>{{month}}</td>
                    <!-- 遍历1-31天，对应每一列 -->
                    <td ng-repeat="day in getDaysArray(31) track by $index">
                        <!-- 取值：如果该日期没有数据则显示0，再格式化货币 -->
                        {{ (monthlyData[month][formatDay(day)] || 0) / 1000000 | currency:"&#8377;" }}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

方案的核心优势 #

• 数据结构清晰：按月份分组后，取值逻辑更直观，避免了重复遍历原始数据。
• 代码简洁：通过循环生成表头和列，不用手动写31个<th>和<td>，维护更方便。
• 逻辑正确：每个月份对应一行，每个日期对应一列，完美匹配你想要的展示效果。

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