Question

假设我有一个嵌套的对象文字，我想在表格中显示它的内容。如果对象深2级，我可以使用：

      <table>
          <thead>
            <tr>
              <td>key</td>
              <td>value</td>

            </tr>
          </thead>
          <tbody ng-repeat="(key01, value01) in data">
            <tr ng-repeat="(key02, value02) in value01">
                <td>{{key02}}</td>
                <td>{{value02}}</td>
            </tr>
          </tbody>
        </table>

如果我有一个3或4级深度的嵌套对象，使用类似的方法如何在表格中显示数据？我所拥有的最好的是来自this previously answered question，但是我不希望在控制器中执行此逻辑，如建议here。

我需要一种方法来嵌套超过2 ng-Repeats，如上所示，因为在我的应用程序中，键名在数据生成时是可变的。

3级深嵌套对象的示例：

$scope.someVar =    { 'data': {
                              'A': {
                                     'x':'someValue'
                                   },
                               'B': {
                                     'y':'anotherValue'
                                    } 
                              }
                     }

Answer 1

不幸的是，根据您声明的要求，这是不可能的。表元素结构不具备您想要的嵌套类型。我知道你说你不想在控制器中这样做但这可能是最好的方法，因为桌子是一种表示2D信息的方式，而不是更多。

另外应该说，如果您在这些嵌套的ngRepeats中放入大量数据，您很可能会将浏览器放慢到无法使用的状态。

如果你真的无法在控制器中进行某种转换（这在浏览器上更容易，因为它只做了一次，而不是每次都有变化......）你将不得不使用div具有类似样式的表格。试试here (link)

Answer 2

你应该做这样的事情

$scope.someVar = { 'data': {
     'A': {
          'x':'someValue'
           },
     'B': {
         'y':'anotherValue'
           } 
}

然后你必须像这样使用ng-repeat，

<tbody ng-repeat="(key01, value01) in someVar.data">
        <tr ng-repeat="(key02, value02) in value01">

嵌套对象上的ng-repeat元素

2 个答案: