Question

如何使用ng-repeat绑定以下JSON中的键值？

例如，我希望显示Peacefulness工具的终身价值。然后在他们的点击上想要在下一页显示他们的子对象数据。

＆＃13;

var meditationData = {
    "Peacefulness": {
        "Breathing": {
            "fivemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "threemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "description": "Some description Some description Some description Some description…",
            "tenmin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…"
        },
        "Rest": {
            "fivemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "threemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "description": "Some description Some description Some description Some description…",
            "tenmin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…"
        }
    },
    "Tools For Life": {
        "Abundance": {
            "fivemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "threemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "description": "Some description Some description Some description Some description…",
            "tenmin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…"
        },
        "Patience": {
            "fivemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "threemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "description": "Some description Some description Some description Some description…",
            "tenmin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…"
        },
        "Kidness": {
            "fivemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "threemin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…",
            "description": "Some description Some description Some description Some description…",
            "tenmin": "http://s1281.ve.vc/data/128/35750/276391/Shoon_Shaan_(iTunes)_-_Dil…"
        }
    }
};

＆＃13;

Answer 1

您可以使用ng-repeat="(key, value) in data"之类的

<ul>
  <li ng-repeat="(key, value) in meditationData">
    <a href="#" ng-click="view(key)">{{key}}</a>
  </li>
</ul>

修改见Working Fiddle

Answer 2

你可以使用ObjectDefinedInScope中的ng-repeat =“（键，值）重复每个对象”

<ul>
    <li ng-repeat="(key1,value1) in meditationData">
        {{key1}}
         <ul ng-repeat="(key2,value2) in value1" >
            <li>
                {{key2}}
                <ul ng-repeat="(key3,value3) in value2" >
                    <li>{{key3}} : {{value3}}</li>
                </ul>
             </li>
        </ul>
    </li>

</ul>

jsfiddle solution to your problem

注意：这是AngularJS的优点，它可以帮助您将HTML扩展为更具表现力和可读性的格式

Answer 3

首先，您需要在数组中获取meditationData的键，为此，请使用以下行：

Object.keys(meditationData);

上面的代码返回如下数组：[“Peacefulness”，“Tools for Life”]

借助返回的数组，您可以在模板中执行ng-repeat。在ng-click功能中，将单击的键作为参数，并根据接收的值显示相应的数据。

如何使用ng-repeat嵌套JSON来绑定键值

3 个答案: