AngularJs

Question

我正在尝试迭代给定的 JSONObject，其中包含 JSONArray 并将其显示在 html 中。所以，这里是例子：

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:

<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>

到目前为止，我可以正确地获得 name 和 desc，但我在 html 中错过了 category。任何帮助将不胜感激。

Answer 1

您需要访问在您的情况下为 "category1" 的元素的键。

你可以使用这个语法来做到这一点

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

here working jsfiffle for your example

Answer 2

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

演示

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>

AngularJs - 嵌套的 ng-repeat

AngularJs - Nested ng-repeat

nested

angularjs-ng-repeat