AngularJs (ng-repeat tr) + (ng-repeat td) + (ng-switch td) +(ng-repeat x)答案

【问题标题】：AngularJs (ng-repeat tr) + (ng-repeat td) + (ng-switch td) +(ng-repeat x)AngularJs (ng-repeat tr) + (ng-repeat td) + (ng-switch td) +(ng-repeat x)
【发布时间】：2013-11-23 04:34:35
【问题描述】：

     <tr ng-repeat="rows in DATA1">
            <INEEDSOMETAG ng-repeat="(key,part) in rows" ng-switch on="key">

                <td ng-switch-when="ABCD" ng-repeat="piece in part">{{piece}}</td>
                <td ng-switch-default>{{part}}</td>

            </INEEDSOMETAG>
      </tr>

这些信息是从一个 json 对象中解析出来的，其中一个“部分”是另一个对象，我需要遍历它，但将它们显示为另一个“td”。

如果可能的话，显然一种方法是提供某种动态标签（'INEEDSOMETAG'）

下面的json：

{obj1:  {
        ABCD:{
                x:'x',
                y:'y'
                },
        a:'a',
        b:'b',
        c:'c',
        d:'d',
    },

obj2:{
        ABCD:{
                z:'x',
                f:'y'
                },
        a:'a',
        b:'b',
        c:'c',
        d:'d',
    },

}

添加了一个 jsfiddle：http://jsfiddle.net/kDF5L/1/

【问题讨论】：

无论你在 Angular 文档和教程中看到什么，都会使用自定义标签。看来您没有太多阅读文档。当您尝试使用与现在完全相同的标记时会发生什么？在 jsfiddle.net 或 plunker 中提供一个演示
我明白你在说什么，但是它无法在 'tr' 和 'td' 属性之间工作，因为在 'tr' 中只允许使用 'td' 而其他标签被浏览器忽略正确的？ -附言我在过去一周通读了文档，但仍然没有解决方案
OK...非常简单的指令将您的td 作为模板传递，并使用replace:true。我实际上想知道...浏览器讨厌表格中的无效嵌套
我会将此切换/重复逻辑放入控制器中。添加一个方法，返回所有单元格以显示当前行，并迭代此方法的结果。控制器将进行切换，并返回相应的列表。
您真正需要的只是 td 中继器数据的过滤器。如果您清理演示，使其不会破坏分钟页面加载，并且数据适合表达式......会有所帮助

标签： angularjs html-table angularjs-ng-repeat cell ng-switch

【解决方案1】：

首先要解决几个问题：

您的<span> 标签未正确平衡；它们都以</td>结尾。
$scope.js 不是有效的 Javascript。对象必须包含键/值对，所以我认为您应该使用 array 对象。

如果你真的想走这条路（正如评论员所建议的那样，这看起来不像是完成你想要做的任何事情的最 Angular 方法） - 我制作了一个 JSFiddle 来演示如何你可以让代码开始做一些事情。

如果您仍然对制作像 <i-need-some-tag> 这样的自定义元素感兴趣（我假设您现在不需要这样做，尽管知道如何做到这一点对于框架来说是非常基础的），您需要编写custom directive。 How to do that 有点超出了这个问题的范围，但是 Stack Overflow、Google 和 AngularJS 文档上有很多关于如何做到这一点的资源。你会从这样的开始：

.directive("INeedSomeTag", function() {
    return {
        restrict: 'E', // used like <i-need-some-tag>
        replace: true,
        template: `<td>...</td>` 
    }
});

而like charlietfl said，您也许可以将<td> 元素传递到指令定义对象的template 属性中。

【讨论】：