AngularJs-嵌套ng-repeat

Question

I'm trying to iterate over a given JSONObject, which contains JSONArray in it and display it in html. 我试图遍历给定的JSONObject，其中包含JSONArray并以html显示。 So, here is the example: 因此，这是示例：

jsonData: jsonData：

{
    "category1": [
        {
            "name": "Some title",
            "desc": "And its description"
        },
        {
            "name": "Another title here",
            "desc": "Also description here"
        }
    ],
    "category2": [
        {
            "name": "Dummy name",
            "desc": "Lorem ipsum etc."
        }
    ],
    "category3": [
        {
            "name": "Blah",  
            "desc": "Blah blah"
        }
    ]
}

Html: HTML：

<div ng-repeat="category in vm.jsonData track by $index">
    <h3>{{ category }}</h3>
    <ul>
        <li ng-repeat="item in category">
            <span><b>{{ item.name }}</b></span><br/>
            <span>{{ item.desc }}</span>
        </li>
    </ul>
</div>

So far I can get name and desc properly but I miss category in html. 到目前为止，我可以得到name和desc正确，但我错过category在HTML中。 Any help would be appreciated. 任何帮助，将不胜感激。

Answer 1

You need ng-repeat as <div ng-repeat="(key, value) in vm.jsonData track by $index"> 您需要ng-repeat作为<div ng-repeat="(key, value) in vm.jsonData track by $index">

DEMO 演示

 var app = angular.module('testApp',[]); app.controller('testCtrl',function(){ this.jsonData = { "category1": [ { "name": "Some title", "desc": "And its description" }, { "name": "Another title here", "desc": "Also description here" } ], "category2": [ { "name": "Dummy name", "desc": "Lorem ipsum etc." } ], "category3": [ { "name": "Blah", "desc": "Blah blah" } ] }; vm = this; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <body ng-app="testApp" ng-controller="testCtrl as vm"> <div ng-repeat="(key, value) in vm.jsonData track by $index"> <ul> {{key}} <li ng-repeat="item in value"> <span>{{ item.name }}</span> <span>{{ item.desc }}</span> </li> </ul> </div> </body>

Answer 2

You need to access key of the element which is "category1" in your case. 在您的情况下，您需要访问元素的关键字“ category1”。

you can do this by using this syntax 您可以使用以下语法来做到这一点

ng-repeat="(key, value) in data"

here working jsfiffle for your example 这里为您的示例工作jsfiffle

AngularJs-嵌套ng-repeat

问题描述

2 个解决方案

解决方案1
3 已采纳 2018-09-19 16:35:41

解决方案2
1 2018-09-19 16:24:32

AngularJs-嵌套ng-repeat

问题描述

2 个解决方案

解决方案1 3 已采纳 2018-09-19 16:35:41

解决方案2 1 2018-09-19 16:24:32

解决方案1
3 已采纳 2018-09-19 16:35:41

解决方案2
1 2018-09-19 16:24:32