Html 角网格中的主/明细栅格

在Angular中，我试图创建一个具有可折叠细节行的表。我有一个示例，它使用了一堆行面板来处理主控细节，其中包含可折叠的表（如果是主控细节的话）。我正试图修改代码，以便使用表来表示主数据，也使用表来表示详细数据。然而，我无法让它正常打开或折叠

我有一个非常简单的plunker文件来演示我所拥有的：

我相信这是HTML的一个问题，我正在尝试在不同的地方使用ng repeat进行测试，比如在div或tr上，但我对angular不太熟悉。有人能指出我做错了什么吗？我正在尝试以下方法：

身份证件
名称
{{product.productid}
{{product.productname}
#身份证
项目
数量
数量
角度.module（'app'，[]）
.controller（'homeController'，['$scope'，函数（$scope）{
$scope.collapse=函数（事件）{
$（event.target）.toggleClass（“字形图标V形向下”）；
};
$scope.products=[{
“产品ID”：1001456，
“产品名称”：“春季礼物”，
“金额”：250，
“订单日期”：“2015-02-15T00:00:00Z”，
“可用性”：1，
“项目”：[{
“prodDetailId”：17890，
“prodDetailDesc”：“PS4”，
“金额”：“150”，
“数量”：1
}, {
“prodDetailId”：17891，
“prodDetailDesc”：“心形环”，
“金额”：“100”，
“数量”：1
}, ]
}, {
“产品ID”：1001457，
“产品名称”：“圣诞节礼物”，
“金额”：349，
“订单日期”：“2015-04-15T00:00:00Z”，
“可用性”：1，
“项目”：[{
“prodDetailId”：17900，
“prodDetailDesc”：“巧克力礼品盒”，
“金额”：“150”，
“数量”：1
}, {
“prodDetailId”：17901，
“prodDetailDesc”：“Xbox 360”，
“金额”：“199”，
“数量”：1
}, ]
}, {
“产品ID”：1001458，
“产品名称”：“生日礼物”，
“可用性”：“不适用”，
“金额”：200
}];
}]);

您的HTML结构错误。 你不能直接在桌子里放一个div

您需要添加一个tr，然后添加一个td，然后在其中添加div

我已经纠正了你的HTML结构，请检查

身份证件
名称
{{product.productid}
{{product.productname}
#身份证
项目
数量
数量
角度.module（'app'，[]）
.controller（'homeController'，['$scope'，函数（$scope）{
$scope.collapse=函数（事件）{
$（event.target）.toggleClass（“字形图标V形向下”）；
};
$scope.products=[{
“产品ID”：1001456，
“产品名称”：“春季礼物”，
“金额”：250，
“订单日期”：“2015-02-15T00:00:00Z”，
“可用性”：1，
“项目”：[{
“prodDetailId”：17890，
“prodDetailDesc”：“PS4”，
“金额”：“150”，
“数量”：1
}, {
“prodDetailId”：17891，
“prodDetailDesc”：“心形环”，
“金额”：“100”，
“数量”：1
}, ]
}, {
“产品ID”：1001457，
“产品名称”：“圣诞节礼物”，
“金额”：349，
“订单日期”：“2015-04-15T00:00:00Z”，
“可用性”：1，
“项目”：[{
“prodDetailId”：17900，
“prodDetailDesc”：“巧克力礼品盒”，
“金额”：“150”，
“数量”：1
}, {
“prodDetailId”：17901，
“prodDetailDesc”：“Xbox 360”，
“金额”：“199”，
“数量”：1
}, ]
}, {
“产品ID”：1001458，
“产品名称”：“生日礼物”，
“可用性”：“不适用”，
“金额”：200
}];
}]);