1

Is there a way to repeat rows in a table based on the amount of data some level deep in an object (more than two)?

Something like:

<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>

where

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 }
   }
}

I have found a way that works with two levels using the <tbody> tag to repeat on the first level and <tr> for the second level, but this only works for two levels of data. What if I have 5 levels?

Similar to https://stackoverflow.com/a/23699153, but I want to compact the data to two rows rather than dedicating an entire row (that is mostly empty) for keys. In that example, title and subtitle would rowspan over col1 and col2 (like this).

user5884435
  • 11
  • 1
  • I can't seem to answer my own question, but I figured out that I can just collapse the first x rows by not putting data in them and then use `ng-repeat-begin` and `ng-repeat-end`. – user5884435 Feb 04 '16 at 17:56

1 Answers1

0

Ending up with something like:

<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>

But then this messes up trying to highlight every other row with different coloring in CSS (since there are now "hidden" rows).

user5884435
  • 11
  • 1