Question

有没有办法根据对象深层次的数据量（超过两个）重复表中的行？

类似的东西：

<table>
   <tr ng-repeat="(key2, values) in list where list in (key1, list) in mydata">
      <td rowspan="6" ng-if="$parent.$first">{{key1}}</td>
      <td rowspan="3" ng-if="$first">{{key2}}</td>
      <td ng-repeat="value in values">{{value}}</td>
   <tr>
</table>

，其中

var mydata = {
   "Subtitle1": {
      "Thing1": { "Value1": 12, "Value2": 43, "Value3": 12 },
      "Thing2": { "Value1": 12, "Value2": 43, "Value3": 12 }
   },
   "Subtitle2": {
      "Thing1": { "Value1": 12, "Value2": 43, "Value3": 12 },
      "Thing2": { "Value1": 12, "Value2": 43, "Value3": 12 }
   }
}

我找到了一种方法，使用<tbody>标记在两个级别上重复，在第一级重复，<tr>重复第二级，但这仅适用于两级数据。如果我有5个级别怎么办？

类似于 https://stackoverflow.com/a/23699153，但我想将数据压缩为两行，而不是将整行（大部分为空）专用于密钥。在该示例中，标题和字幕将rowspan超过 col1 和 col2 （{{3} }）。

Answer 1

以类似的方式结束：

<table>
   <tr><th>Title</th><th>Subtitle</th><th>Value</th></tr>
   <tr ng-repeat-start="(subtitle, things) in mydata">
      <td rowspan="8" ng-if="$first">{{subtitle}}</td>
   </tr>
   <tr ng-repeat="(thing, values) in things">
      <td rowspan="4" ng-if="$first">{{thing}}</td>
   </tr>
   <tr ng-repeat-end ng-repeat="value in values">
      <td>{{value}}</td>
   </tr>
</table>

但是这会弄乱我试图突出显示CSS中不同着色的所有其他行（因为现在有“隐藏”行）。

链angularjs重复

1 个答案: