Question

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

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个。

Answer 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'}..

然后进行双重重复循环：

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

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

Answer 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)性能，因此不是很好的解决方案。

如何将2D数据表示到表中

2 个答案: