Question

我有一些具有挑战性的要求，并寻找动态渲染它的解决方案。我会请专家帮我解决以下问题。

我需要按照上面的格式渲染数据，json数据如下所示

 [ {    Region: 'India'     State: 'MH'     Month: 'jan-16'     visits: 10230157 }, {   Region: 'India'     State: 'DL'     Month: 'jan-16'     visits: 20023423 }, {   Region: 'India'     State: 'TL'     Month: 'jan-16'     visits: 38023804 }, {   Region: 'India'     State: 'RJ'     Month: 'jan-16'     visits: 65102322 }, {   Region: 'India'     State: 'KN'     Month: 'jan-16'     visits: 80234109 } ]

使用以下模板并根据您的解决方案进行更新（如果需要）。

<div class="tablecontainer" ng-if="groups.length > 0" ng-repeat="cat in groups">
     <div class="row rowspace">
        <div>{{cat.group.name}}</div>
        <div ng-if="cat.group.columns.length>0" ng-repeat="column in cat.group.columns">
            <div>{{column.name}}</div>
        </div>
    </div>
    <div class="row">
         <table class="table table-striped table-bordered">
            <tr>
                <th ng-repeat="column in cat.cols">{{column}}</th>
            </tr>
            <tr ng-repeat="row in cat.rows">
                <td ng-repeat="column in cat.cols">{{row[column]}}</td>
            </tr>
         </table>
    </div>
</div>

非常有帮助，感谢您的帮助。

由于

Answer 1

您必须预处理数据，以便在视图中呈现它。将您的数据转换为二维形式：processedData [Month] [Stat] =访问默认情况下，在ng-repeat中按键显示角度排序对象的元素，您可以根据需要安排排序。

<!DOCTYPE html>
    <html>
        <head>
            <script src="js/angular.min.js"></script>                
            <script>
                var app = angular.module("myApp", []);
                app.controller("myCtrl", function ($scope) {
                $scope.datas = [{ Region: 'India', State: 'MH', Month: 'jan-16', visits: 10230157},
                                { Region: 'India', State: 'DL', Month: 'jan-16', visits: 20023423},
                                { Region: 'India', State: 'TL', Month: 'jan-16', visits: 38023804},
                                { Region: 'India', State: 'RJ', Month: 'jan-16', visits: 45102322},
                                { Region: 'India', State: 'KN', Month: 'jan-16', visits: 50234109},
                                { Region: 'India', State: 'MH', Month: 'fev-16', visits: 60023423},
                                { Region: 'India', State: 'DL', Month: 'fev-16', visits: 70023423},
                                { Region: 'India', State: 'TL', Month: 'fev-16', visits: 88023804},
                                { Region: 'India', State: 'RJ', Month: 'fev-16', visits: 95102322},
                                { Region: 'India', State: 'KN', Month: 'fev-16', visits: 10234109}
        ];
                $scope.processedDatas = {};
                $scope.datas.forEach(el => {
                    if (!(el.Month in $scope.processedDatas)) {
                        $scope.processedDatas[el.Month] = {};
                    }
                    $scope.processedDatas[el.Month][el.State] = el.visits;
                });

                console.log("Processed data: ", $scope.processedDatas);
            });

            </script>
        </head>

        <body ng-app="myApp" ng-controller="myCtrl">
            <table>
                <tr>
                    <th> Region</th>
                    <th col-span="5"> State </th>
                </tr>
                <tr>
                    <th>India</th>
                    <th>DL</th>
                    <th>KN</th>
                    <th>MH</th>
                    <th>RJ</th>
                    <th>TL</th>
                </tr>
                <tr>
                    <th>Month</th>
                    <th>Visits</th>
                    <th>Visits</th>
                    <th>Visits</th>
                    <th>Visits</th>
                    <th>Visits</th>
                </tr>
                <tr ng-repeat="(rowKey, rowValue) in processedDatas">
                    <td>{{rowKey}}</td>
                    <td ng-repeat="visits in rowValue"> {{visits}} </td>
                </tr>
            </table>
        </body>

    </html>

通过JSON数据进行动态表呈现

1 个答案: