关于复杂JSON解析的问题(angularjs和javascript)

时间:2015-03-29 06:59:47

标签: javascript json angularjs

我有json如下,

{
    "natureitems": [
        {
            "groups": "fruits",
            "items": [
                {
                    "name": "apple",
                    "properties": {
                        "color": "red",
                        "shape": "round"
                    }
                },
                {
                    "name": "orange",
                    "properties": {
                        "color": "orange",
                        "shape": "round"
                    }
                }
            ]
        },
        {
            "groups": "vegitables",
            "items": [
                {
                    "name": "carrot",
                    "properties": {
                        "color": "red",
                        "shape": "cone"
                    }
                },
                {
                    "name": "tomoto",
                    "properties": {
                        "color": "red",
                        "shape": "round"
                    }
                }
            ]
        }
    ]
}

我需要单个 li ng-repeat (角度视图)的输出,如

------------------
fruits(these titles row in different background colors)
------------------
apple   - round
orange  - round

----------------
vegitables
---------------
carrot - cone
tomoto - round

我尝试了很多for循环和角度foreach,但我分别得到项目和分组。但是之后尝试将上述结构(title-items-title -items)带入一个阵列非常困难。

有没有简单的方法可以将这种格式的项目放入数组或对象中?这样我就可以很容易地绑定到ng-repeat!

1 个答案:

答案 0 :(得分:1)

如果您没有绑定到单个级别,则需要使用嵌套的ng-repeat

<ul>
    <li ng-repeat="group in object.natureitems">
        <span class="group-title">{{group.groups}}</span>
        <ul>
            <li ng-repeat="item in group.items">{{item.name+" - "+"item.properties.shape"}}</li>
        </ul>
    </li>
</ul>

这是一个示例plunker