how to create a angular table row to have a collapsed row - json

Question

I have a table which will have collapsed rows that have 2nd level info, but not all the rows will have this 2nd level data.
How can i write a controller to only show a 2nd level collapse row if the JSON script has a 2nd level?

Answer 1

With the following json defined in your controller:
$scope.cakes = [{ "id": "0001", "type": "donut", "name": "Cake",
"ppu": 0.55, "batters": "whatever",
"topping": [ { "id": "5001", "type": "None" },
{ "id": "5002", "type": "Glazed" },
{ "id": "5005", "type": "Sugar" },
{ "id": "5007", "type": "Powdered Sugar" },
{ "id": "5006", "type": "Chocolate with Sprinkles" },
{ "id": "5003", "type": "Chocolate" },
{ "id": "5004", "type": "Maple" } ] },
{ "id": "0002", "type": "cupcake", "name": "Cupcake",
"ppu": 0.60, "batters": "whatever",
"topping": [] },
{ "id": "0003", "type": "muffin", "name": "Muffin",
"ppu": 0.25, "batters": "whatever",
"topping": [] }
];
you can selectively show a second row in a table where cake.topping.length is greater than 0:
<table>
<tr ng-repeat-start="cake in cakes">
<td>{{cake.type}}</td><td>{{cake.name}}</td>
</tr>
<tr ng-repeat-end ng-show="cake.topping.length>0">
<td ng-repeat="t in cake.topping">{{t.type}}</td>
</tr>
</table>