使用 ng-repeat 为 json 数组对象动态显示表中的数据答案

【问题标题】：Displaying Data in table with ng-repeat dynamically for json array object使用 ng-repeat 为 json 数组对象动态显示表中的数据
【发布时间】：2016-01-27 17:43:00
【问题描述】：

After using ng-repeat i have the data displayed in this format, but i want "battersID" column to be displayed in the single cell or as shown in other picture

我的 html 代码 sn-p 如下所示，

<tr ng-repeat="items in list >
        <td>{{items.id}}</td>
        <td>{{items.type}}</td>
        <td>{{items.name}}</td> 
        <td ng-repeat="batters in items.batters"> {{batters.id}}</td>  
          
</tr>

上面的代码显示了表格中的数据，如上图所示 I need the data to be displayed as shown in the picture

我的示例 json 文件，

[
    {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters":
        [
            { "id": "1001", "type": "Regular" },
            { "id": "1003", "type": "Blueberry" },
            { "id": "1004", "type": "Devil's Food" }
        ],

    },
    {
        "id": "0002",
        "type": "sample",
        "name": "sample",
        "ppu": 0.55,
        "batters":
        [
            { "id": "1001", "type": "Regular" },

        ],

    },
    {
        "id": "0003",
        "type": "test",
        "name": "test",
        "ppu": 0.55,
        "batters":
        [
            { "id": "1001", "type": "Regular" },
            { "id": "1003", "type": "Blueberry" },

        ],

    },
    {
        "id": "0001",
        "type": "donut",
        "name": "Cake",
        "ppu": 0.55,
        "batters":
        [
            { "id": "1001", "type": "Regular" },
            { "id": "1003", "type": "Blueberry" },
            { "id": "1004", "type": "Devil's Food" }
            { "id": "1001", "type": "Regular" },
            { "id": "1003", "type": "Blueberry" },
        ],

    }
]

【问题讨论】：

你到底尝试了什么？
您应该尝试自己解决问题。然后，如果您遇到困难，请在此处发布，我们会为您提供帮助。这个门户不是为了让别人做你的工作。
我已经尝试过使用 ng-repeat 并以表格格式显示它，但“batters.id”可能有多个值，我希望它显示为如上所示图片。目前 Batters.id 显示在同一行。

标签： angularjs

【解决方案1】：

使用ng-repeat 并在ng-reapeat 中编写如下代码：

ng-repeat="key in controllerName.varName"

例子：

<div ng-repeat="test in testController.varName"><div>{{test.id}}</div><div>{test.type}}</div></div>

varName = Your JsonArray;

【讨论】：