Question

我有以下数据结构：

var myDataStructure =


[
    {
        "Period": {
            "Name": "Period1",
        },
        "Data": {
            "Now": {
                "NowNames": [
                    {
                        "Value": "Name1"
                    },
                    {
                        "Value": "Name2"
                    },
                    {
                        "Value": "Name3"
                    }
                ],
                "LaterNames": [
                    {
                        "Value": "Name4"
                    },
                    {
                        "Value": "Name5"
                    },
                    {
                        "Value": "Name6"
                    }
                ],
            }
        }  
    },     
    {
        "Period": {
            "Name": "Period2",
        },
        "Data": {
            "Now": {
                "NowNames": [
                    {
                        "Value": "Name7"
                    },
                    {
                        "Value": "Name8"
                    },
                    {
                        "Value": "Name9"
                    }
                ],
                "LaterNames": [
                    {
                        "Value": "Name10"
                    },
                    {
                        "Value": "Name11"
                    },
                    {
                        "Value": "Name11"
                    }
                ],
            }
        }  
    }     
]

我希望在表格的主体中打印第一行，其中一个单元格保存两个句点的每个NowNames的名称值，然后再打印一行，其中一个单元格保存两个句点的每个LaterNames的名称值。使用AngularJ的最佳方法是什么？我正在寻找正确的语法，因为首先我必须做一个forEach循环低谷时段，并且从Period.Data值我必须打印一个具有NowNames等值的行，如：

<tr ng-repeat="Period in myDataStructure">
    <tr ng-repeat="Item in Period.Data.Now.NowNames">
        <td>
            {{Item.Value}}
        </td>
    </tr>
    <tr ng-repeat="Item in Period.Data.Now.LaterNames">
        <td>
            {{Item.Value}}
        </td>
    </tr>
</tr>

但是没有嵌套的tr，因为它无效并且不起作用预期结果：

<tbody>
    <tr>
        <td>
            Name1
        </td>
    </tr>
    <tr>
        <td>
            Name2
        </td>
    </tr>
    <tr>
        <td>
            Name3
        </td>
    </tr>
    <tr>
        <td>
            Name7
        </td>
    </tr>
    <tr>
        <td>
            Name8
        </td>
    </tr>
    <tr>
        <td>
            Name9
        </td>
    </tr>
    <!-- after that the same for LaterNames in the same order.... -->
</tbody>

Answer 1

您可以使用嵌套的ng-repeat实现此目的：

<table>
    <tbody ng-repeat="subdata in myDataStructure">
        <tr ng-repeat="nowName in subdata.Data.Now.NowNames">
            <td>{{nowName.Value}}</td>
        </tr>  
    </tbody>

    <tbody ng-repeat="subdata in myDataStructure">
        <tr ng-repeat="LaterName in subdata.Data.Now.LaterNames">
            <td>{{LaterName.Value}}</td>
        </tr>
    </tbody>
</table>

在此处查看有效的演示：http://jsfiddle.net/8ZSB4/19/

可能这是一个更好的解决方案，准备已经在控制器中的输出：读取JSON并创建一个新的JSON，其中包含右侧的数据。这会使输出更清洁。

在HTML表格主体中对JSON进行Angularjs ng-repeat

1 个答案: