将动态表从行转置为列，反之亦然 [英] Transpose dynamic table from rows to columns and vice versa

问题描述

config.previewData = [
    {
        Cartridges:27989,
        Total Accounts:294,
        Metrices:"MVC",
        Toner Cartridges:5928,
        INK Cartridges:22061
    },
    {
        Cartridges:56511,
        Total Accounts:376,
        Metrices:"SMB",
        Toner Cartridges:15253,
        INK Cartridges:41258
    },
    {
        Cartridges:84,500,
        Total Accounts:670,
        Metrices:"Grand Total",
        Toner Cartridges:21,181,
        INK Cartridges:63,319
    },
]

和我的html代码类似

and my html code like this

<table class="table table-striped">
    <thead>
        <tr role="row">
            <th data-ng-repeat="(key, val) in config.previewData[0]">
                {{ key}}
            </th>
        </tr>
    </thead>

    <tbody>
        <tr data-ng-repeat="row in config.previewData">
            <td data-ng-repeat="column in row">
                {{column}}
            </td>
        </tr>
    </tbody>
</table>

此代码将完美打印，如下图所示

this code will print perfect like below image

现在我想将此表转置为行对列和列对行.动态表是否可以做到这一点，因为我的对象是动态不固定的.

now i want to transpose this table into rows to columns and columns to rows. Is this possible with dynamic table because my object is dynamic not fixed.

如果有人知道该怎么做，请帮助我.转置后的表看起来像这样

Help me if anyone knows how to do this. After transpose table looks like this

推荐答案

使用与示例代码相同的假设(即 config.previewData 始终包含至少一个对象，并且所有对象都具有相同的对象)属性...)

Using the same assumptions your example codes does (i.e. config.previewData always contains at least one object, and all objects have the same properties...)

<table class="table table-striped">
    <tbody>
        <tr data-ng-repeat="(key, val) in config.previewData[0]">
            <th>
                {{ key }}
            </th>
            <td data-ng-repeat="row in config.previewData">
                {{ row[key] }}
            </td>
        </tr>
    </tbody>
</table>

这篇关于将动态表从行转置为列，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！