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。

Answer 2

在创建复杂的表逻辑时，常规的ng-repeat 可能通常不起作用，因为它需要在<tr>、<td> 和@987654327 之外完成 @的。

Angular 团队曾经提出了一种将 Angular 代码添加到 HTML cmets 的方法，例如指令和重复，但显然是 there were too many browser issues。

不过，你可以看看ng-repeat-start和ng-repeat-end，这解决了（可以解决）很多与表格和ng-repeat相关的问题。至少，它对我有用，从那以后再也没有遇到过桌子问题。

Official documentation

也许this blog post 会帮助你。

_{还有，groetjes uit Hoorn}