AngularJs-嵌套ng-repeat
[英]AngularJs - Nested ng-repeat
问题描述
我试图遍历给定的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正确，但我错过category在HTML中。 任何帮助，将不胜感激。
2 个解决方案
解决方案1
3 已采纳 2018-09-19 16:35:41
您需要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>
解决方案2
1 2018-09-19 16:24:32
嵌套的ng-repeat angularjs
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.