Question

我有一个像这样的JSON字符串：

{
"electronics": {
    "cameras": [
        "sony",
        "nikon",
        "canon"
    ],
    "TV": "none",
    "laptop": [
        "hp",
        "apple",
        "sony"
    ]
},
"home": {
    "furniture": [
        "table",
        "chair",
        "cupboard"
    ],
    "couch": "none",
    "utensils": "none"
},
"books": {
    "educations": [
        "geography",
        "science"
    ],
    "magazines": "none"
},
"kids": {
    "toys": [
        "games",
        "building toys",
        "dolls & accessories",
        "baby & toddler"
    ],
    "clothes": "none"
},
"sports": {
    "outdoor": "none",
    "exercise": [
        "footwear",
        "clothing",
        "yogas & DVDs"
    ]
},
"photos": {
    "cards & invitations": "none",
    "canvas wall art": "none",
    "mugs": "none"
}

}

我想使用bootstrap将列表显示为下拉列表。使用带有硬编码值的bootstrap的HTML代码如下。

 <li class="dropdown"  style="width:140px;">
                    <a class= "dropdown-toggle dropdown-menu-hover-color menu-left-color"  data-toggle="dropdown" href="#">Electronics </a>

                    <ul class="dropdown-menu" style="position:absolute;float:right;top: 0; left: 140px; ">
                        <li>
                            <a class="dropdown-level1-color menu-left-color" href= "#">Laptop</a> 
                            <ul type="none">
                                <li><a href="#">Apple</a></li> 
                                <li><a href="#">Sony</a></li> 
                                <li><a href="#">HP</a></li>
                            </ul>
                        </li>
                        <li>
                            <a class="dropdown-level1-color menu-left-color" href=  "#">Camera</a>
                            <ul type="none">
                                <li><a href="#">Canon</a></li> 
                                <li><a href="#">Nikon</a></li> 
                                <li><a href="#">Sony</a></li>
                            </ul>
                        </li> 
                        <li><a class="dropdown-level1-color menu-left-color" href= "#">TV</a></li>
                    </ul>
                </li>

我想使用AngularJS将JSON中的值填充到HTML代码中。任何指向实现的指针将不胜感激。提前谢谢。

Answer 1

查看http://json.bloople.net/，该页面提供了一个在线转换器JSON - ＆gt; HTML并提供指向源的链接。

BTW：“电子”，“家”，......是对象而不是数组的任何原因。

将嵌套的JSON数据插入html下拉列表

1 个答案: