如何将二维数据表示为表格答案

【问题标题】：How to represent a 2D data into a table如何将二维数据表示为表格
【发布时间】：2015-11-04 02:57:51
【问题描述】：

我的数据表示为行/列对的列名、行名和值。它看起来像这样：

cols = ['A', 'B', 'C', 'D'];
rows = ['1', '2', '3', '4'];
data = [
    {row: '1', col:'A', value: 'a'},
    {row: '2', col:'C', value: 'b'},
    {row: '3', col:'B', value: 'c'}
];

我如何让它出现在这样的表格中？我正在使用 Angular 1.4。

我的数据量是有限的，不要指望它在数据中超过 50-100 个条目。

【问题讨论】：

标签： angularjs

【解决方案1】：

将您的数据对象更改为字典：

data = [
{row: '1', col:'A', value: 'a'},
{row: '2', col:'C', value: 'b'},
{row: '3', col:'B', value: 'c'}
];

变成：

data = {'A1' : 'a', 'C2' : 'b', 'B3' : 'c'}..

然后做一个双 ng-repeat 循环：

<div ng-repeat="col in cols">
   <div ng-repeat="row in rows">
       {{ data[row + col] == null ? "&nbsp;" : data[row + col] }}

免责声明：这是未经测试的，我的角度语法可能不正确，但我希望你明白。

【讨论】：

谢谢！我最终写了一个过滤器。在这里发布答案。

【解决方案2】：

由于我被限制为无法重新格式化数据并且实际数据比这更复杂，因此我最终编写了一个过滤器。我的 html 看起来像这样：

<div>
    <table>
        <tr><td></td>
            <td ng-repeat="col in cols">{{ col }}</td>
        </tr>
        <tr ng-repeat="row is rows">
            <td>{{ row }}</td>
            <td ng-repeat="col in cols">
                <div ng-repeat="obj in data | findRowCol:row:col">
                    {{ obj.value }}
                </div>
            </td>
        </tr>
    </table>
</div>

我借用了 KayakDave 的回答 here 作为我的过滤器。

app.filter('findRowCol', function() {
    return function(data, row, col) {
        result = [];
        data.forEach(function(el) {
            if(el.row === row && el.col === col)
                result.push(el);
        });
        return result;
    }
});

由于data 预计不会以任何特定方式订购，因此它可能具有O(N^3) 的性能，因此不是很好的解决方案。

【讨论】：