Javascript AngularJS:ng使用对象数组的数组字段重复

我有一个json结构：

let total_price = "£100";

let product_groups = [
    {
        "name": "group 1",
        "summary": "group 1 summary",
        "products": [
            {
                "name": "product 1",
                "price": "£10",
                ...
            }, 
            ...
        ]
    },
    ...
]

我正在尝试将其展平，并使用以下表格显示它

<table class="table">
    <thead>
        <tr>
            <th>Group Name</tr>
            <th>Product Name</tr>
            <th>Product Price</tr>
        </tr>
     </thead>
     <tbody>
         <tr ng-repeat="group in product_groups">
             <td>{{group.name}}</td>
             <td>{{product.name}}</td>
             <td>{{product.price}}<td>
         </tr>
         <tr>
             <th colspan="2">Total</th>
             <td>{{total_price}}</td>
         </tr>
     </tbody>
</table>

组名
品名
产品价格
{{group.name}
{{product.name}
{{product.price}}
全部的
{{总价}

---

但这显然不能让我接触到每一种产品。有没有一种方法可以使用

ng repeat

？或者我需要首先在控制器中展平我的数据结构吗？

在现有结构中使用新的ng repeat，如嵌套循环。

请尝试下面的解决方案

    $scope.newArray = [];

    let product_groups = [
        {
            "name": "group 1",
            "summary": "group 1 summary",
            "products": [
                {
                    "name": "product 1",
                    "price": "£10",
                }, 
            ]
        },
    ];

for(var i = 0; i< product_groups.length; i++) {
   for(var j =0; j< product_groups[i].products.length; j++) {
    var flattenProduct = {
                           gname:product_groups[i].name, 
                           name:product_groups[i].products[j].name,
                           price : product_groups[i].products[j].price
                        };
        $scope.newArray.push(flattenProduct );
 }

}

$scope.newArray=[]；
设乘积_组=[
{
“名称”：“第1组”，
“总结”：“第1组总结”，
“产品”：[
{
“名称”：“产品1”，
“价格”：“10英镑”，
}, 
]
},
];
对于（变量i=0；i

然后调用html，如下所示：

<table class="table">
    <thead>
        <tr>
            <th>Group Name</tr>
            <th>Product Name</tr>
            <th>Product Price</tr>
        </tr>
     </thead>
     <tbody>
         <tr ng-repeat="p in newArray">
             <td>{{p.gname}}</td>
             <td>{{p.name}}</td>
             <td>{{p.price}}<td>
         </tr>
     </tbody>
</table>

组名
品名
产品价格
{{p.gname}}
{{p.name}}
{{p.price}}

您应该展平JSON。我建议改变你的结构，从：

产品组=[{
“名称”：“第1组”，
“总结”：“第1组总结”，
“产品”：[{
“名称”：“产品1”，
“价格”：“10英镑”
},
{
“名称”：“产品2”，
“价格”：“20英镑”
}
]
}]

致：

产品组=[{
“名称”：“第1组”，
“总结”：“第1组总结”，
“产品”：{
“名称”：“产品1”，
“价格”：“10英镑”
}
},
{
“名称”：“第1组”，
“总结”：“第1组总结”，
“产品”：{
“名称”：“产品2”，
“价格”：“20英镑”
}
}
]

然后，您可以简单地使用以下示例：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.product_组=[{
“名称”：“第1组”，
“总结”：“第1组总结”，
“产品”：{
“名称”：“产品1”，
“价格”：“10英镑”，
}
},
{
“名称”：“第1组”，
“总结”：“第1组总结”，
“产品”：{
“名称”：“产品2”，
“价格”：“20英镑”，
}
}
]
});

组名
品名
产品价格
{{group.name}
{{group.product.name}
{{group.product.price}
您可以使用嵌套的
ng repeat'并使用
ng repeat start
和
ng repeat end`尝试以下操作


var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.product_groups=[{“名称”：“第1组”，“摘要”：“第1组摘要”，“产品”：[{“名称”：“产品1”，“价格”：“10英镑”，“产品1”，“价格”：“10英镑”，}，]}，{“名称”：“第2组”，“摘要”：“第2组摘要”，“产品”：[{“名称”：“产品21”，“价格”：“20英镑”，}，{“名称”：“产品15”，“价格”：“80英镑”，}，}，}，}）；
});

组名
品名
产品价格
{{group.name}
{{product.name}
{{product.price}}
如何在表结构中执行此操作？是否有一种方法可以在
tbody
上不使用最上面的
ng repeat
执行此操作？我计划在
Total Price
的末尾添加一个额外的
tr
行，此方法将以duplicates@Edd请您发布预期输出。@Edd我已经更新了答案，现在不会创建重复项。请看一看。
ng repeat start
和
ng repeat end
看起来非常有用，谢谢它可以工作，但它在每行的两侧都添加了一个额外的
元素，我担心：（我使用的是Bootstrap 4，它为不可见的行添加了很多额外的空白