在表中动态显示json数组对象的数据

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

使用ng-repeat之后，我将数据以这种格式显示，但我希望“battersID”列显示在单个单元格中，或者如其他图片所示

my html code snippet is as posted below,

我的html代码片段如下所示，

<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>

the above code display the data in Table as shown in above picture I need the data to be displayed as shown in the picture

My example json file,

我的示例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" },
        ],

    }
]

1 个解决方案

#1

Use ng-repeat and in the ng-reapeat write code like this :

使用ng-repeat，在ng-reapeat中编写如下代码:

ng-repeat="key in controllerName.varName"

controllerName.varName ng-repeat =“关键”

Example:

例子:

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

varName = Your JsonArray;

#1