AngularJS ng-repeat 用于动态子 json 数组
Posted
技术标签:
【中文标题】AngularJS ng-repeat 用于动态子 json 数组【英文标题】:AngularJS ng-repeat for dynamic child json array 【发布时间】:2016-05-26 02:57:03 【问题描述】:我有一个动态 JSON,其中包含名称列表,它还包含子名称作为子集。如何使用 angularJS ng-repeat 在 html UI 中显示它
示例动态 JSON 是
$scope.family = [
"name":"Siva",
"child":[
"name":"Suriya"
,
"name":"Karthick"
]
,
"name":"Kumar",
"child":[
"name":"Rajini"
,
"name":"Kamal"
,
"name":"Ajith"
]
,
"name":"Samer"
,
"name":"Mahesh"
];
<div ng-repeat="members in family">
<!-- How to Show it in the UI -->
</div>
注意:JSON 是基于 Request 生成的。子数组是 可选,它可能包含长度'n'
【问题讨论】:
它不是一个有效的 JSON。 @Rajesh 我更新了 JSON... 你可以试试这样的:JSFiddle 【参考方案1】:您可以通过添加ng-if
指令来更好地回答,因为child
是可选。当然,它不会对您的应用产生任何影响,但它是一种很好的编码方式。
另外,不是在ul
上添加ng-repeat
,而是应该在li
中。为单个列表循环 ul
是没有意义的。
请参考示例here。
HTML:
<div ng-app="app" ng-controller="test">
<ul ng-repeat="member in family">
<li>
member.name
<span ng-if="member.child.length > 0">
<ul>
<li ng-repeat="c in member.child">c.name</li>
</ul>
</span>
</li>
</ul>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function ($scope)
$scope.family = [
"name": "Siva",
"child": [
"name": "Suriya"
,
"name": "Karthick"
]
,
"name": "Kumar",
"child": [
"name": "Rajini"
,
"name": "Kamal"
,
"name": "Ajith"
]
,
"name": "Samer"
,
"name": "Mahesh"
];
);
【讨论】:
【参考方案2】:正确答案
<ul ng-repeat="member in family">
<li>member.name
<ul>
<li ng-bind="c.name" ng-repeat="c in member.child"></li>
</ul>
</li>
</ul>
【讨论】:
以上是关于AngularJS ng-repeat 用于动态子 json 数组的主要内容,如果未能解决你的问题,请参考以下文章
在 angularjs 中使用 ng-repeat 创建动态表
AngularJS ng-repeat 通过复杂和动态的 JSON 数组