jquery - AngularJS 1 - 创建一个带有可扩展标题和列的矩阵

Question

我想创建一个矩阵(在 AngularJS 中，而不是 Angular2)像这样的表格(下面这个表格的代码):

但是，我有一个很奇怪的要求。顶行和第一列都需要可扩展。这意味着(行)数字“1”将展开为更多元素，例如“10、100、1000”。这些新数字应添加到“1 之下”(见下图)或 1 和 2 之间。

这同样适用于(列)数字 1，这个数字也应该能够扩展为相同的“10,100,1000”，并且应该(垂直地)添加到“1 之下”或 1 和 2 之间。

请看下面的图片作为引用:

下图是使用表结构制作的:

您可以清楚地看到“欧洲”扩展到“意大利”和“西类牙”，而意大利进一步扩展到罗马和米兰。用于创建它的 JSON 如下:

 $scope.tasks = [
    {
        name: 'Europe',
        children: [
            {
                name: 'Italy',
                children: [
                    {
                        name: 'Rome'
                    },
                    {
                        name: 'Milan'
                    }
                ]
            }, 
            {
                name: 'Spain'
            }
        ]
    }, 
    {
        name: 'South America',
        children: [
            {
                name: 'Brasil'
            },
            {
                name: 'Peru'
            }
        ]
    }
];

侧面应使用相同的 JSON，有效地创建一个矩阵，其中所有扩展项之间的每个匹配项都将可见。

我曾尝试使用表和行为类似于表的 div 创建矩阵。两者都不适合我。 (对于表格，我遇到了 this problem 并且 div 问题在代码中可见)。

现在我不知所措，我四处寻找可用的产品，但似乎没有，我尝试自己做，我得出结论我需要一些帮助:)

为了方便起见，我已经将我的测试代码上传到bitbucket .

_{另外，如果我得到一个可行的解决方案，我会等待赏金可用，然后再接受答案。}

Answer 1

最后，我构建了自己的解决方案，因为在线解决方案不够完整。

最接近且值得一提的是 Khan4019/tree-grid-directive然而。