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.