在ng-repeat中无法访问的键值对的值部分

时间:2014-03-28 19:41:10

标签: html angularjs

我在AngularJS下面有以下HTML代码

<div class="col-xs-1" style="width:130pt;background-color:#474747;border:2px ridge;">
    <div class="container-fluid"> 
        <ul class="nav">
            <li class="dropdown" style="width:140px;" ng-repeat = "page in homeCategoryList">
                <a class= "dropdown-toggle dropdown-menu-hover-color menu-left-color" data-toggle="dropdown" href="#" ng-repeat ="(key, value) in page">{{key}}</a>
                <ul class="dropdown-menu" style="position:absolute;float:right;top: 0; left: 140px;">
                    <li ng-repeat = "subcat in value">
                        <a class="dropdown-level1-color " href= "#" ng-repeat="(key,value) in subcat">{{key}}</a>
                        <ul type="none">
                          <li ng-repeat="childcat in value"><a href="3">{{childcat}}}</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

我想使用angularjs在上面的html中表示以下JSON。问题是我能够访问“电子设备”而不是它的值是一个数组。“{ng}}中的li ng-repeat =”subcat会出现错误错误:[$ parse:syntax]语法错误:令牌'value'是意料之外的,期望[[{{}}]的第3列的[:]从[value}}开始。

[
    {
        "electronics": [
            {
                "cameras": [
                    "sony",
                    "panasonic",
                    "nikon",
                    "canon"
                ]
            },
            {
                "TV": "none"
            },
            {
                "laptop": [
                    "toshiba",
                    "hp",
                    "apple",
                    "samsung",
                    "sony",
                    "acer",
                    "lenovo"
                ]
            }
        ]
    },
    {
        "home": [
            {
                "furniture": [
                    "cupboard",
                    "table",
                    "chair"
                ]
            },
            {
                "couch": "none"
            },
            {
                "utensils": "none"
            }
        ]
    }
]

有人可以告诉我如何在ng-repeat中访问值变量。

1 个答案:

答案 0 :(得分:1)

您必须重新执行HTML /课程,但请查看此处:http://jsfiddle.net/Fs8eH/

如果图层深入,您可能需要考虑使用树指令。

<ul ng-app ng-controller="MyCtrl">
    <li style="width:140px;" ng-repeat="page in homeCategoryList">
        <div ng-repeat="(key, value) in page"> <span>{{key}}</span>

            <ul>
                <li ng-repeat="item in value">
                    <div ng-repeat="(key, value) in item"> <span>{{key}}</span>

                        <ul>
                            <li ng-repeat="brand in value"> <span>{{brand}}
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>
相关问题