Question

我想创建一个矩阵（在AngularJS中，而不是Angular2）像这样的表（下表的代码）：

但是，我有一个相当奇怪的要求。顶行和第一列都需要是可扩展的。这意味着（行）数字＆＃34; 1＆＃34;将展开更多的项目，例如，＆＃34; 10,100,1000和＃34;。这些新数字应该加在＆＃34;＆＃34;＆＃34; 1（见下图）或1和2之间。

同样适用于（列）1号，这个数字也应该能够扩展到相同的＆＃34; 10,100,1000＆＃34;并且应该（垂直地）添加＆＃34;＆＃34;＆＃34; 1或1和2之间。

请参考以下图片作为参考：

使用表格结构制作了以下图片：

你可以清楚地看到＆＃34;欧洲＆＃34;扩展到＆＃34;意大利＆＃34;和＃34;西班牙＆＃34;意大利已经进一步扩展到罗马和米兰。用于创建它的JSON如下：

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

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

我尝试使用表格和表格来创建矩阵。对我来说都不是很好。（我遇到this problem的表格，代码中可以看到divs问题。

现在我不知所措，我一直在寻找可用的产品，其中似乎没有产品，而且我已经尝试自己做了，我已经得出结论我需要一些帮助：）

为方便起见，我已将测试代码上传至bitbucket。

_{此外，如果我得到一个可行的解决方案，我会在接受答案之前等待赏金。}

Answer 1

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

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

Answer 2

创建复杂的表格逻辑时，常规的ng-repeat可能无法正常工作，因为它需要在<tr>的之外完成，{{1} }和<td>的。

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

但是，您可以查看<th>和ng-repeat-start，这可以解决（可以解决）与表和ng-repeat-end相关的许多问题。至少，它确实适用于我，从那时起就没有遇到过表格问题。

Official documentation

也许this blog post会帮助你。

_{_{此外，groetjes uit Hoorn}}

AngularJS 1 - 使用可扩展标题和列创建矩阵

2 个答案: