如何创建 angular table 行以折叠行

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

我有一个 table,它将折叠具有二级信息的行,但并非所有行都具有二级数据。

如果 JSON 脚本有第 2 级,我如何编写控制器只显示第 2 级折叠行?

在您的控制器中定义了以下 json:

$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": [] }
                ];

您可以选择性地显示 table 中的第二行,其中 cake.topping.length 大于 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>